Progress bars

Linear progress bars, labelled usage indicators, ranked lists with inline bars, and SVG circular rings.

DEFAULT PROGRESS BARS

Bootstrap progress with brand colors

25%
50%
75%
92%
LABELED PROGRESS

Used in usage / quota displays

Same pattern from the billing tab in profile.

API calls · 412k of 500k
Storage · 24 GB of 100 GB
Team seats · 6 of 10
Bandwidth · 950 GB of 1 TB
RANK LIST WITH BARS

Top-N rankings

Each row carries an inline progress bar showing relative scale.

CIRCULAR PROGRESS

SVG circular progress rings

Pure CSS / SVG, no library required.

75%Storage
42%Memory
88%CPU
24%Network

Copyright © 2026 Colorlib. All rights reserved. Template by Colorlib.