Progress Bars – 8 Free CSS, Bootstrap & Tailwind Sets
Progress Bars is a pack of eight sets of linear and circular progress indicators, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 built on .progress and restyled through its CSS variables, and Tailwind CSS 4 with utility classes. The sets run from everyday labelled bars and striped or indeterminate bars to stacked storage and native meter quotas, skill and goal bars, conic and SVG rings, upload and download rows, a dark set and a set where CSS scroll timelines and @property do what usually takes JavaScript. None of them needs a script.
A good progress bar tells people three things: what is progressing, how far it has got, and whether anything is wrong. It needs a label tied to it, role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax, and aria-valuetext when a bare percentage is not enough, such as 4.2 MB of 6.8 MB. A quota or usage level is a measurement rather than a task, so it belongs in a meter element. The fill should stand out at 3:1 against its track, failure and warnings need a word as well as a colour, and an indeterminate bar should leave out aria-valuenow instead of pretending to a number. Stripes, sweeps and glows should stop for people who ask for reduced motion.
