Progress Bar V04
Template Details
Author: Colorlib
Released: September 2026
License: CC BY 3.0
Description
A weekly fitness goals panel built from SVG rings in three sizes: one large ring with the percentage in its centre, three medium rings for steps, workouts and sleep, and a row of small daily rings. A Sync tracker button animates every ring and its number to new values. The rings suit course completion, quotas and any goal tracking view.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 164 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- SVG rings using pathLength="100" so the value maps straight to the stroke
- Count-up number animation that jumps instantly under reduced motion
- Three ring sizes from one set of styles
- role="progressbar" on every ring, updated by the demo button
- Rendered values work without JavaScript
Similar Templates
