Progress Bar V04

Author: Colorlib

Released: September 2026

License: CC BY 3.0

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