Progress Indicator
A visual element that communicates completion status of a task, process, or multi-step workflow.
Plain English
Progress indicators answer "where am I and how much is left?" They reduce anxiety in multi-step flows because users can see the finish line. A checkout has 3 steps — knowing you are on step 2 of 3 feels manageable. Progress bars show completion of a single measurable task (file upload: 60%). Steppers show discrete steps in a sequence (Shipping → Payment → Review). The key principle: show progress, not time elapsed.
Technical
Linear progress bar: <progress> element (native, accessible) or custom CSS — a container div with a filled child div whose width is set to the percentage. Transition width for smooth updates. Indeterminate (pulsing): CSS animation for unknown duration. Stepper: horizontal or vertical row of numbered steps with connector lines. Current step: accent colour + filled circle. Completed: checkmark or solid circle. Upcoming: muted/outlined. Accessibility: aria-valuenow, aria-valuemin, aria-valuemax on progress bars; aria-current="step" on steppers.
Live Demo
Linear progress bar
Step indicator
Circular spinner (indeterminate)
Use step indicators for multi-step flows. Linear bars for file uploads. Spinner for unknown duration.
Usage
✓ Good usage
A 3-step checkout stepper (Shipping ✓ / Payment ← / Review) showing the user is on step 2, step 1 is complete, step 3 is upcoming.
✗ Bad usage
A progress bar that jumps from 0% to 100% in one instant — defeats the entire purpose of the component.
Recommended values
- Linear bar height: 4-8px
- Stepper dot: 28-32px diameter
- Connector line: 1-2px, ink-200 (incomplete) → accent (complete)
- Labels: below the stepper dots
- Animate: smooth transition on percentage change
- Indeterminate: animated gradient sweep for unknown duration
Common mistakes
- No progress indication on long multi-step processes.
- Labels so small they cannot be read.
- No way to navigate back to a completed step.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Multi-step form: horizontal stepper with 32px numbered circles, 2px connecting lines. Completed: accent-filled + ✓. Current: accent border + accent number. Upcoming: ink-200 border + muted number. Labels below at 13px. Allow clicking completed steps to go back.