Progress Component
Contextual progress indicators, height variations, animated stripes, and stacked multi-step bars.
Basic Progress Bars & Labels
Default Bootstrap progress bars with percentage headers and inner label indicators.
Initial Progress
25%
Progress with Inner Label
50%
High Completion
75%
Completed Task
100%
Brand & Contextual Colors
Progress bars styled with Spark Admin brand colors and standard contextual states.
Dark Forest Brand
60%
Lime Accent Brand
85%
Success State
40%
Warning State
70%
Danger State
90%
Striped & Animated Progress
Add `.progress-bar-striped` and `.progress-bar-animated` to apply striped gradient animations.
Striped Forest Progress
45%
Animated Lime Progress
75%
Animated Info Progress
60%
Height Sizing & Stacked Progress
Sizing utility classes (`.progress-xs`, `.progress-sm`, `.progress-lg`) and multi-color stacked bars.
Extra Small (`.progress-xs` - 4px)
35%
Small (`.progress-sm` - 8px)
55%
Large (`.progress-lg` - 22px)
65%
Stacked Multi-Segment Progress
80% Total
Reusable Code Snippets
Copy and paste these progress bar snippets directly into your workspace files.
Brand & Animated Progress Bars
<div class="progress progress-md">
<div class="progress-bar bg-forest w-50-pct"></div>
</div>
<div class="progress progress-lg">
<div class="progress-bar bg-lime progress-bar-striped progress-bar-animated w-75-pct">75%</div>
</div>
Height Sizing & Stacked Progress
<div class="progress progress-xs">
<div class="progress-bar bg-forest w-25-pct"></div>
</div>
<div class="progress progress-lg">
<div class="progress-bar bg-forest w-25-pct">25%</div>
<div class="progress-bar bg-lime w-50-pct">50%</div>
</div>