Progress
Bars and circles that show how far a task, upload or goal has come. They use the same colour set as alerts and badges.
Basic
.progress-line
Set the width on the inner
<span>, and the value in aria-valuenow
Sizes
.progress-xs · -sm · -lg · -xl
Extra small
.progress-xs (3px)
Small
.progress-sm (5px)
Default (8px)
Large
.progress-lg (12px)
Extra large
.progress-xl (18px)
With Label
.progress-head
Name and value above the bar
Value inside a
Translated to Кыргызча68%
Storage64.3 GB of 100 GB
.progress-xl bar
40%
80%
Colours
.success · .danger · .warning …
Palette class on the
<span>
Tinted track
.soft + colour class on the bar
Multiple Bars
.progress-stacked
Several
<span>s in one bar — parts of a total
Published 148
Draft 32
Scheduled 12
With values inside (.progress-xl)
46%
28%
16%
10%
Striped & Animated
.progress-striped · .progress-animated
Striped
.progress-striped
Moving stripes — add
.progress-animated while work is going on
Circular
.progress-ring · style="--value:72"
Sizes
Colours and a caption
.progress-ring-sm · default · .progress-ring-lg
35%
72%
90%
86
SEO score
58%
Images with alt text
24%
Broken links fixed
In Context
Uploads — update the width from your script (click “Run upload”)
Checklist in a task card
hero-banner.jpgWaiting
price-list-2026.pdfWaiting
Homepage hero redesign3 / 6 done
50%