UI Components

Progress Indicator

A progress indicator shows that work is happening or how much has finished.

Also called Progress barSpinnerLoaderLoading barProgress meter

Visual Example

Try it: advance the progress bar.

Progress: 40%

Plain Definition

Progress indicators make waiting visible and help set expectations during slower work.

Use a determinate progress bar when the interface knows how much work is complete. Use an indeterminate spinner or loader when the app only knows that work is still happening.

You Might Describe This As...

  • "Loading bar"
  • "Progress meter"

Fast lookup

You May Also Mean

Progress Indicator is often mixed up with Loading State because the patterns can organize or reveal similar content in different ways.

Loading State

Check the name, visual cue, and typical use.

What It Is Used For

  • Uploading files
  • Completing setup steps
  • Showing a long process is underway

Example User Phrasing

  • "Show a progress bar while the file uploads."
  • "Add a loader while the report is being generated."