Skip to content
Sageio
Notifications
Chloe Sato sent a new order
11 hours agoNora Duarte sent a new order
55 min agoNadia Patel sent a new order
5 days ago
View all

Progress

Progress bars show how far a task, a goal or a quota has come. Below are the basic bars with labels, heights, colours, stripes and stacked segments, followed by practical widgets such as uploads, goals, storage meters, wizards, rating breakdowns and a circular ring.

1Basic bars

The width of <code>.progress-bar</code> shows the value; ARIA attributes describe it for screen readers.

2Labels

Put text inside the bar; <code>.overflow-visible</code> keeps a long label readable on a short bar.

71%
Only 12% of the upload is done

3Height

Set the height on <code>.progress</code>; the bar follows.

4Backgrounds

Background utilities colour the bar.

5Striped

<code>.progress-bar-striped</code> adds a diagonal stripe pattern.

6Animated stripes

Add <code>.progress-bar-animated</code> so the stripes move - a clear sign that work is ongoing.

7Multiple bars

<code>.progress-stacked</code> puts several segments side by side in one track.

8Contrasting labels

<code>.text-bg-*</code> sets a matching background and readable text colour in one class.

Done 90%
Almost 65%
Late 40%

9Label row

Name on the left, percentage on the right, thin bar below.

Secure giving83%
Tax receipts25%
Secure giving83%

10Skill bars

A compact grid of labelled skill or score bars.

Planning
79
Design
63
Writing
60
Support
70

11File uploads

Per-file upload rows with type icon, status text, a thin bar and a remove button.

  • report.pdfComplete
  • cover.png68% - 5 MB
  • assets.zip79% - 8 MB

12Goal card

A fundraising or sales goal with the amount reached and the target.

Small acts, big impact

$20,160.00

raised of $48,000.00 goal

42% funded29 days left

13Storage usage

A stacked bar with a legend shows how space is split.

Storage57 GB of 100 GB
DocumentsPhotosBackups

14Wizard steps

A progress track with step labels under it for multi-step forms.

Account Details Payment Done

15Card top bar

A borderless thin bar across the top edge of a card shows that it is refreshing.

Food relief

Our annual report is independently audited and published in full.

16In a table

Project rows with a bar per row; colour reflects the state.

ProjectProgressDone
How your donations built three new classrooms
94%
What happens after a disaster appeal
33%
The small habits that make a big difference
86%
Why we plant trees with the schools we build
91%

17Rating breakdown

Star rating distribution, as used on review pages.

4.2 from 744 reviews

5
71%
4
12%
3
4%
2
2%
1
4%

18Checklist progress

A card that shows how many tasks of a checklist are complete.

Launch checklist

2 / 4

19Circular progress

A ring drawn with a conic gradient; set the value with the <code>--cb-p</code> variable.

59%
Visits
74%
Sales
73%
Tickets

20Plan limits

Usage meters that turn yellow and red as a limit gets close, with an upgrade link.

Projects4 / 10
Team seats8 / 10
API calls98 / 100k
Upgrade plan