Skip to main content

# 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.

- 1 Q1 product launch — paid $74,310
- 2 Black Friday early access $58,920
- 3 Spring sale — apparel $42,165
- 4 Reactivation email flow $36,400
- 5 Affiliate partner push $24,850

##### 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.