Progress Bars
Animated skill / progress indicators (label + percentage) that fill to their value when scrolled into view. Tabs: Bars, Style, Animations, Advanced.
💡 Web dev tip: a progress bar has a real element
HTML has a native <progress> element (and <meter> for a static measurement like disk usage). Using them — or ARIA's role="progressbar" with aria-valuenow — means assistive tech announces the value, not just a coloured bar. MDN: the progress element
Live demo
▶ See the Progress Bars live on the demos site — an interactive example you can click through.
Bars
| Option | Choices |
|---|---|
| Progress Style | Horizontal Bar · Circle · Gauge (semi-circle) |
| Bars | A repeatable list; each bar has a Label, Percent (0–100), Icon and Color |
The Circle and Gauge styles add Diameter / Width, Thickness and Per Row (1–6) options.
Style
| Option | Choices |
|---|---|
| Bar Height | e.g. 10px, .6rem (bars only) |
| Value Position | Beside label · Inside the bar (bars only) |
| Rounded | On/Off |
| Striped | On/Off (bars only) |
| Show Percentage | On/Off |
| Animate on Scroll | On/Off |
| Count Up Number | On/Off |
| Spacing | Gap between items |
Plus Fill Color, an optional Gradient Color (second color), Track Color (unfilled track) and Label Color.