PROGRESS: Completion indicators
VARIANTS: Bar | Stepper
Consolidated entry for progress indication. Bar is the continuous percentage bar; Stepper is the discrete multi-step sequence.
PROGRESS BAR: Displays task or process completion status
VARIANTS: primary | success | danger | warning | info
SIZES: default (6px) | md (10px) | lg (16px)
MODES: determinate (fixed %) | indeterminate (bouncing)
Use progress bars to show how far along a process is. Choose determinate when the percentage is known, or indeterminate when the duration is unknown.
Determinate progress: Set the bar width to reflect completion percentage.
Uses .progress-bar-primary by default.
0% — Not started
25% — Quarter complete
50% — Half complete
75% — Three quarters
100% — Complete
<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-primary" style="width: 50%"></div>
</div>
Semantic colors: Use color variants to convey meaning. Primary for general progress, success for completion, danger for critical limits, warning for caution, and info for informational processes.
Primary — .progress-bar-primary
Success — .progress-bar-success
Danger — .progress-bar-danger
Warning — .progress-bar-warning
Info — .progress-bar-info
<div class="progress-bar progress-bar-success" style="width: 60%"></div>
Three sizes: Default (6px), medium (10px), and large (16px).
Add .progress-md or .progress-lg to the track element.
Default (6px) — .progress
Medium (10px) — .progress .progress-md
Large (16px) — .progress .progress-lg
<div class="progress progress-lg">...</div>
Stimulus-driven animation: The progress controller animates the bar
from 0% to 100% over a configurable duration. Set data-progress-loop-value="true"
to repeat continuously.
Looping animation (3 seconds per cycle)
Looping animation — success color (5 seconds)
<div data-controller="progress" data-progress-animate-value="true" data-progress-loop-value="true">
<div class="progress">
<div class="progress-bar progress-bar-primary" data-progress-target="bar"></div>
</div>
</div>
Unknown duration: When you cannot determine the percentage, use
.progress-indeterminate on the track. The bar bounces continuously using
a CSS-only animation. No JavaScript required.
Primary — indeterminate
Success — indeterminate
Danger — indeterminate
Warning — indeterminate
Info — indeterminate
<div class="progress progress-indeterminate" role="progressbar" aria-label="Loading...">
<div class="progress-bar progress-bar-primary"></div>
</div>
Sizes work with indeterminate too: Combine .progress-indeterminate
with .progress-md or .progress-lg.
Default (6px) — indeterminate
Medium (10px) — indeterminate
Large (16px) — indeterminate
<div class="progress progress-lg progress-indeterminate">...</div>
In context: Progress bars within realistic UI scenarios.
Uploading... 1.4 MB of 2.0 MB
Finding schools near you...
STEPS / WIZARD: Multi-step progress indicator with navigable content panels
VARIANTS: Horizontal | Vertical | Dots-Only
SIZES: Small (.steps-sm) | Default | Large (.steps-lg)
Guide users through multi-step processes like onboarding, checkout, and registration. Supports linear (sequential) and non-linear (free) navigation modes, cancelable validation events, and automatic step state management.
Default layout: Steps flow left-to-right with connector lines between indicators. Click "Continue" to advance, "Back" to return. Click a completed step indicator to jump back.
Review your details before completing setup. You can go back to any previous step to make changes.
<div class="steps" data-controller="steps">...</div>
.steps-vertical: Steps stack vertically with connectors between indicators. Content panel appears to the right of the step list. Ideal for longer forms and side-panel layouts.
Enter details about previous schools and academic achievements.
Upload references, certificates, and other supporting materials.
Provide contact information for your parent or carer.
Review all information before submitting the application.
<div class="steps steps-vertical" data-controller="steps">...</div>
.steps-dots: Compact dot indicators without labels. Active dot has a ring highlight. Ideal for onboarding flows, image carousels, and compact wizards.
Let's get you set up in just a few steps.
Tell us about the subjects and courses you're interested in.
Browse sixth forms and colleges that match your interests.
Set your notification and application deadline reminders.
You're ready to start exploring providers and submitting applications.
<div class="steps steps-dots" data-controller="steps">...</div>
Size variants: .steps-sm (24px indicators),
default (32px), and .steps-lg (40px indicators, thicker connectors).
<div class="steps steps-sm">...</div> /
<div class="steps steps-lg">...</div>
States: Completed (green circle, check icon), Active (white circle, blue border),
Upcoming (gray translucent), and Error (red circle, X icon). States are managed via CSS classes
.completed, .active, and .error.
.step.completed /
.step.active /
.step.error /
.step (upcoming)
Cancelable events: Listen for steps:beforeNext and call
event.preventDefault() to block advancement. This demo requires the
checkbox to be checked before proceeding past step 1.
Please read and accept the terms before continuing.
You must agree to the terms before continuing.
Fill in your information here.
All steps complete. Ready to submit.
data-action="steps:beforeNext->controller#validate" — call
event.preventDefault() to block
data-steps-linear-value="false": Users can click any step indicator to jump directly to it, regardless of completion. Useful for tabed-style forms where sections are independent.
Language, timezone, and regional preferences.
Theme, colours, and display options.
Email, push, and in-app notification preferences.
Data sharing, visibility, and consent settings.
data-steps-linear-value="false"
data-steps-index-value="2": Start the wizard at step 3. All preceding steps (1 and 2) are automatically marked as completed with green check indicators. Useful for resuming a partially completed workflow.
Already completed — click the step indicator to revisit.
Already completed — click the step indicator to revisit.
You resumed here. Continue configuring your preferences.
Final review before completing setup.
data-steps-index-value="2" — steps 0 and 1 are auto-completed