progress component
Drop-in semantic component. See examples, sizes, variants, and source.
Linear and circular progress indicators. A bar comes from
progress with a numeric data-value;
circular form is progress-circle. Layer modifiers for
size (xs / sm /
xl / lg), color
(primary, positive,
negative, warning, ...), and style
(striped, animated,
labeled, segmented,
indeterminate). Dynamic value updates run through
progress.js.
Progress Bar System
Basic Progress Bars
<div class="stack">
<div class="progress" data-value="25"></div>
<div class="progress" data-value="50"></div>
<div class="progress" data-value="75"></div>
<div class="progress" data-value="100"></div>
</div>
Progress Bar Sizes
<div class="stack">
<div class="progress xs" data-value="60"></div>
<div class="progress sm" data-value="60"></div>
<div class="progress" data-value="60"></div>
<div class="progress xl" data-value="60"></div>
<div class="progress lg" data-value="60"></div>
</div>
Color System
<div class="space-y-6">
<div>
<h4 class="subhead font-medium text-gray-700 mb-3">Semantic Colors</h4>
<div class="space-y-3">
<div class="progress" data-value="70"></div>
<div class="progress primary" data-value="70"></div>
<div class="progress positive" data-value="70"></div>
<div class="progress negative" data-value="70"></div>
<div class="progress warning" data-value="70"></div>
<div class="progress info" data-value="70"></div>
</div>
</div>
<div>
<h4 class="subhead font-medium text-gray-700 mb-3">Extended Color Palette</h4>
<div class="space-y-3">
<div class="progress red" data-value="70"></div>
<div class="progress orange" data-value="70"></div>
<div class="progress yellow" data-value="70"></div>
<div class="progress olive" data-value="70"></div>
<div class="progress green" data-value="70"></div>
<div class="progress teal" data-value="70"></div>
<div class="progress blue" data-value="70"></div>
<div class="progress violet" data-value="70"></div>
<div class="progress purple" data-value="70"></div>
<div class="progress pink" data-value="70"></div>
<div class="progress brown" data-value="70"></div>
<div class="progress grey" data-value="70"></div>
<div class="progress black" data-value="70"></div>
</div>
</div>
</div>
Progress with Labels
<div class="stack">
<div class="progress labeled xs" data-value="25"></div>
<div class="progress labeled sm primary" data-value="50"></div>
<div class="progress labeled success" data-value="75"></div>
<div class="progress labeled xl warning" data-value="90" data-label="90% Complete"></div>
<div class="progress labeled lg danger" data-value="100" data-label="Complete!"></div>
</div>
Striped Progress Bars
<div class="stack">
<div class="progress striped" data-value="40"></div>
<div class="progress striped primary" data-value="60"></div>
<div class="progress striped success" data-value="80"></div>
</div>
Animated Progress Bars
<div class="stack">
<div class="progress animated" data-value="45"></div>
<div class="progress striped animated primary" data-value="65"></div>
<div class="progress striped animated success" data-value="85"></div>
</div>
Progress with External Label
<div class="space-y-6">
<div>
<div class="flex justify-between mb-1">
<span class="subhead font-medium text-gray-700">Project Progress</span>
<span class="subhead text-gray-500">45%</span>
</div>
<div class="progress" data-value="45"></div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="subhead font-medium text-gray-700">Upload Progress</span>
<span class="subhead text-gray-500">72%</span>
</div>
<div class="progress primary" data-value="72"></div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="subhead font-medium text-gray-700">Download Speed</span>
<span class="subhead text-gray-500">2.5 MB/s</span>
</div>
<div class="progress success" data-value="85"></div>
</div>
</div>
Segmented Progress
<div class="stack">
<div class="progress segmented xs">
<div class="progress-segment" style="width: 33.33%"></div>
<div class="progress-segment" style="width: 33.33%"></div>
<div class="progress-segment inactive" style="width: 33.33%"></div>
</div>
<div class="progress segmented sm primary">
<div class="progress-segment" style="width: 25%"></div>
<div class="progress-segment" style="width: 25%"></div>
<div class="progress-segment" style="width: 25%"></div>
<div class="progress-segment inactive" style="width: 25%"></div>
</div>
<div class="progress segmented primary">
<div class="progress-segment" style="width: 25%"></div>
<div class="progress-segment" style="width: 25%"></div>
<div class="progress-segment" style="width: 25%"></div>
<div class="progress-segment inactive" style="width: 25%"></div>
</div>
<div class="progress segmented xl success">
<div class="progress-segment" style="width: 20%"></div>
<div class="progress-segment" style="width: 20%"></div>
<div class="progress-segment" style="width: 20%"></div>
<div class="progress-segment" style="width: 20%"></div>
<div class="progress-segment inactive" style="width: 20%"></div>
</div>
<div class="progress segmented lg warning">
<div class="progress-segment" style="width: 16.66%"></div>
<div class="progress-segment" style="width: 16.66%"></div>
<div class="progress-segment" style="width: 16.66%"></div>
<div class="progress-segment" style="width: 16.66%"></div>
<div class="progress-segment" style="width: 16.66%"></div>
<div class="progress-segment inactive" style="width: 16.66%"></div>
</div>
</div>
Circular Progress
<div class="flex gap-6 flex-wrap items-center">
<div class="progress-circle xs" data-value="25">
<svg class="progress-circle-svg" viewBox="0 0 36 36">
<path
class="progress-circle-bg"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<path
class="progress-circle-bar"
stroke-dasharray="25, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
<text
x="18"
y="18"
class="progress-circle-text"
dominant-baseline="middle"
text-anchor="middle"
>
25%
</text>
</svg>
</div>
<div class="progress-circle sm primary" data-value="50">
<svg class="progress-circle-svg" viewBox="0 0 36 36">
<path
class="progress-circle-bg"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<path
class="progress-circle-bar"
stroke-dasharray="50, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
<text
x="18"
y="18"
class="progress-circle-text"
dominant-baseline="middle"
text-anchor="middle"
style="font-size: 12px"
>
50%
</text>
</svg>
</div>
<div class="progress-circle success" data-value="75">
<svg class="progress-circle-svg" viewBox="0 0 36 36">
<path
class="progress-circle-bg"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<path
class="progress-circle-bar"
stroke-dasharray="75, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
<text
x="18"
y="18"
class="progress-circle-text"
dominant-baseline="middle"
text-anchor="middle"
style="font-size: 12px"
>
75%
</text>
</svg>
</div>
<div class="progress-circle xl warning" data-value="85">
<svg class="progress-circle-svg" viewBox="0 0 36 36">
<path
class="progress-circle-bg"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<path
class="progress-circle-bar"
stroke-dasharray="85, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
<text
x="18"
y="18"
class="progress-circle-text"
dominant-baseline="middle"
text-anchor="middle"
style="font-size: 12px"
>
85%
</text>
</svg>
</div>
<div class="progress-circle lg danger" data-value="95">
<svg class="progress-circle-svg" viewBox="0 0 36 36">
<path
class="progress-circle-bg"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<path
class="progress-circle-bar"
stroke-dasharray="95, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
></path>
<circle cx="18" cy="18" r="10" fill="white" opacity="0.95"></circle>
<text
x="18"
y="18"
class="progress-circle-text"
dominant-baseline="middle"
text-anchor="middle"
style="font-size: 13px"
>
95%
</text>
</svg>
</div>
</div>
Indeterminate Progress
<div class="stack">
<div class="progress indeterminate">
<div class="progress-bar"></div>
</div>
<div class="progress indeterminate primary">
<div class="progress-bar"></div>
</div>
<div class="progress indeterminate success">
<div class="progress-bar"></div>
</div>
</div>
Progress in Context
File Upload Progress
document.pdf
2.4 MB / 5.2 MB
<div class="bg-white p-6 rounded-lg border border-gray-200 stack">
<h4 class="font-medium text-gray-900">File Upload Progress</h4>
<div class="space-y-3">
<div class="flex items-center justify-between subhead">
<span class="text-gray-600">document.pdf</span>
<span class="text-gray-500">2.4 MB / 5.2 MB</span>
</div>
<div class="progress primary" data-value="46"></div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between subhead">
<span class="text-gray-600">image.jpg</span>
<span class="text-green-600">Complete</span>
</div>
<div class="progress success" data-value="100"></div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between subhead">
<span class="text-gray-600">video.mp4</span>
<span class="text-gray-500">Waiting...</span>
</div>
<div class="progress" data-value="0"></div>
</div>
</div>
JavaScript API
Dynamic Progress Control
Reset
+10
-10
50%
Complete
Animated Progress
Animate to 100%
Animate to 0%
Random
Create Progress Dynamically
Create Striped
Create Labeled
Create Indeterminate
<div class="space-y-6">
<div>
<h4 class="subhead font-medium text-gray-700 mb-3">Dynamic Progress Control</h4>
<div id="demo-progress" class="progress primary" data-value="30"></div>
<div class="flex gap-2 mt-3">
<button class="btn xs" onclick="Progress.reset('demo-progress')">Reset</button>
<button class="btn xs" onclick="Progress.increment('demo-progress', 10)">+10</button>
<button class="btn xs" onclick="Progress.decrement('demo-progress', 10)">-10</button>
<button class="btn xs" onclick="Progress.set('demo-progress', 50)">50%</button>
<button class="btn xs" onclick="Progress.complete('demo-progress')">Complete</button>
</div>
</div>
<div>
<h4 class="subhead font-medium text-gray-700 mb-3">Animated Progress</h4>
<div id="animated-progress" class="progress positive" data-value="0"></div>
<div class="flex gap-2 mt-3">
<button class="btn xs" onclick="Progress.animate('animated-progress', 100, 2000)">
Animate to 100%
</button>
<button class="btn xs" onclick="Progress.animate('animated-progress', 0, 1000)">
Animate to 0%
</button>
<button
class="btn xs"
onclick="Progress.animate('animated-progress', Math.random() * 100, 1500)"
>
Random
</button>
</div>
</div>
<div>
<h4 class="subhead font-medium text-gray-700 mb-3">Create Progress Dynamically</h4>
<div id="dynamic-container"></div>
<div class="flex gap-2 mt-3">
<button
class="btn xs"
onclick="
const container = document.getElementById('dynamic-container');
container.innerHTML = '';
Progress.create({
container: container,
value: 60,
color: 'warning',
striped: true,
animated: true
});
"
>
Create Striped
</button>
<button
class="btn xs"
onclick="
const container = document.getElementById('dynamic-container');
container.innerHTML = '';
Progress.create({
container: container,
value: 75,
color: 'negative',
labeled: true
});
"
>
Create Labeled
</button>
<button
class="btn xs"
onclick="
const container = document.getElementById('dynamic-container');
container.innerHTML = '';
Progress.create({
container: container,
indeterminate: true,
color: 'primary'
});
"
>
Create Indeterminate
</button>
</div>
</div>
</div>
Class API Reference
Type
Class / Attribute
Usage
Notes
Base
progressLinear bar container
Pair with data-value 0–100
progress-barInner fill element (auto-added by JS)
Required only for indeterminate / segmented
progress-circleCircular progress wrapper for an SVG ring
Children: .progress-circle-bg, .progress-circle-bar, .progress-circle-text
data-valueNumeric percentage (0–100)
Read by progress.js
Sizes
xs4px tall bar / 48px circle
Modifier on progress / progress-circle
sm5px tall / 56px circle
Modifier on progress / progress-circle
(default) 6px tall / 64px circle
No size class needed
xl8px tall / 72px circle
Modifier on progress / progress-circle
lg10px tall / 80px circle
Modifier on progress / progress-circle
Variants
stripedDiagonal stripe overlay on the bar
Modifier on progress
animatedContinuous slide; combines with striped
Modifier on progress
labeledReserves height for an inline label inside the bar
Pair with data-label
segmentedMultiple discrete slices — children are .progress-segment
Use .inactive on un-filled slices
indeterminateContinuous loading sweep; ignores data-value
Requires inner .progress-bar
data-labelCustom label text for labeled bars
Defaults to "{value}%"
Semantic Colors
primaryBlue fill
Modifier on progress / progress-circle
positive / successGreen fill
Modifier on progress / progress-circle
negative / dangerRed fill
Modifier on progress / progress-circle
warningOrange fill
Modifier on progress / progress-circle
infoBlue fill (alias for primary)
Modifier on progress / progress-circle
red orange yellow olive green teal blue violet purple pink brown grey blackExtended palette fills
Decorative; prefer semantic names