Component Card

Progress Bar

Reveal task advancement so users understand waiting and completion.

Progress bar anatomy

When to Use

File uploads and imports where users wait for completion.
Multi-step workflows to show sequence advancement.
Background processing tasks with measurable progress.

When NOT to Use

Use progress bars when progress is measurable or can be estimated realistically.

For unknown durations, use a spinner with clear status text instead of false precision.

Variants

Determinate

Indeterminate

Step progress

Confused?

Use Progress Bar to communicate waiting status, and use Toast for post-action summaries.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Build a progress bar with determinate and indeterminate variants, labels for percent complete, and accessible value attributes.

Pencil Prompt

Design a progress bar section for uploads that shows active progress, completion, and a paused state.

Next Lesson

Modal