Progress Bar & Spinners

A progress bar displays progress made through a process, similar to a percentage value. It shows how much of a task has been accomplished and how much remains to be done.

Progress bars can be either determinate (by default) or indeterminate.

  • Determinate Progress - Provides users feedback on their progress
  • Indeterminate Progress - Relays an unspecified amount of time to complete a process.

Types

Linear

Tracks progress with an animated indicator along a fixed and visible track.

See the Pen Progress Bar - Linear by USANA UX (@usana_ux) on CodePen.

Circular/Spinner

Shows progress by animating a clockwise indicator along an invisible circular track.

See the Pen Progress Bar - Spinner by USANA UX (@usana_ux) on CodePen.

Guidelines

Use a progress bar to see the proportion of the task finished at any time. Uploading files or upgrading an application are good examples.

Anatomy: Progress bar

  1. Track: Indicates the amount of space available to fill with the progress bar.
  2. Progress bar: The percentage of completion is represented a solid shape/line.
  3.  Value: The percentage of the task that has been completed.

Anatomy: Spinnner

  1. Track:
  2. Progress bar:

Specfications

Designers and developers can create correct, pixel-perfect selectors by implementing these specifications.

Do
  • Use a progress bar when it will give people feedback in a long-running process with continuous values.
Don't
  • Use in order to load content into a module
  • Use for indicating distinct steps.