Progress Indicators

Visually displays the completion status or advancement of a task or process, often as a percentage, bar, or animation.

Edit this file

Purpose

Progress indicators provide visual feedback about ongoing processes, helping users understand system status and set appropriate expectations for completion time.

When to Use

Use for operations longer than 1 second, file transfers, multi-step processes, system monitoring, and any time users need feedback about ongoing activities.

DeterminateKnown Progress
Use when you can calculate the percentage of completion
0%
45%

Best for:

  • • File transfers and uploads
  • • Installation processes
  • • Data imports/exports
  • • Multi-step forms
IndeterminateUnknown Duration
Use when you cannot predict completion time or percentage
Loading content, please wait...

Best for:

  • • API requests
  • • Data processing
  • • System initialization
  • • Background tasks
Progress Types Comparison
Understanding when to use different progress indicator types
TypeUse CaseDurationUser Action
Linear BarFile uploads, downloadsKnownWait & monitor
CircularCompact spaces, dashboardsKnown/UnknownQuick glance
Loading DotsContent loadingUnknownWait briefly
Step ProgressMulti-step workflowsVariableActive participation