DesignDojo
1.2-components · 19-progress-bar

Estimated time: 5 min

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.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Modal