Progress

  1. Components
  2. Progress

Live progress control

Adjust the value and watch the bar update.

45%
45%
0%100%

Upload simulation

Start, pause, resume, or reset a sample upload.

Workspace-assets.zip

24 MB / Demonstration upload

Ready to start

Resource allocation

Show separate categories within a shared capacity.

64 GB of 100 GB storage used

28%
36%
Documents / 28 GBMedia / 36 GBAvailable / 36 GB

Striped & animated

Different treatments for ongoing activity.

Processing documents55%
Preparing report70%

Project delivery

Track multiple initiatives with clear labels.

Workspace onboarding75%
Customer insights45%
Component library62%

Bar sizes

Use existing height variants for different contexts.

Compact30%
Standard60%
Prominent85%

Milestone overview

Connect completion with the delivery stages.

Project completion75%
Discovery
Design
Build
Release

State feedback

Represent waiting, completion, and errors.

Completed backup100%
Interrupted sync38%
Waiting for a connection...

Weekly goals

Keep the task count and percentage consistent.

Team delivery

18 of 24 tasks completed
On track
Weekly completion75%
Review tasks

Account setup

A simple checklist linked to its overall progress.

Setup completion50%
  • Personal details added
  • Profile photo selected
  • Notification preferences pending
  • Security review pending

Theme striped bars

Striped treatments using existing Bootstrap variants.

Research40%
40%
Design65%
65%
Development80%
80%

Animated stripes

Animated activity for ongoing processes.

Report processing60%
60%
Asset preparation85%
85%

Rounded progress

Pill-shaped tracks and fills.

Profile setup70%
70%
Review completion90%
90%

Square progress

Straight edges for a compact technical style.

Data import55%
55%
Validation80%
80%

Gradient fills

Use the shared gradient utility on progress fills.

Project delivery75%
75%
Resource allocation45%
45%

Stacked striped segments

Show separate categories within a shared total.

40%
35%
15%

40% completed / 35% in progress / 15% review / 10% remaining

Connected dots

Diamond milestones

Chevron steps

Progress track with milestones

Segmented underline

Icon milestones