component
OrlumaProgressRing
By Noel Dario Andres
Details
- Noel Dario AndresAuthor
- componentType
- $10.00Price
- 2026-06-05Published
- 2026-06-05Updated
- 2026-06-02Added
- InteractiveCategories
Summary
Animated progress ring
Description
Orluma Progress Ring is a premium Framer Code Component for displaying progress, goals, KPIs, skill levels, completion states, and dashboard metrics in a polished visual format. It uses an animated SVG progress ring with gradient stroke, glow, pulse, shimmer, optional icon, value display, label, helper text, and a customizable card container. Everything can be edited directly inside Framer through property controls. You can adjust the value, max value, prefix, suffix, label, helper text, icon, size, shape, card style, stroke width, colors, glow, pulse, shimmer, animation, hover lift, and disabled state without touching the code. Key features: • Animated SVG progress ring • Custom value and max value • Prefix and suffix support • Optional center icon • Optional value display • Optional label and helper text • Gradient progress stroke • Glow effect • Pulse effect • Shimmer highlight • Optional card container • Rounded and circle shapes • Small, medium, and large sizes • Obsidian, Aurora, Glass, and Pearl variants • Custom colors, border, radius, padding, and stroke width • Hover lift interaction • Disabled state • Built with React and Framer Motion • No heavy external dependencies Use it for dashboards, SaaS metrics, AI tools, progress tracking, course completion, fitness goals, finance widgets, productivity apps, portfolio skill displays, and modern Framer templates.
Introduction
Animated progress ring
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #8528