Picchu

Progress Indicator

Guidance

Progress indicators help users follow the progress of a lengthy operation.

Determinate Bar

In cases where it is possible to show an approximate percentage of completion of an operation, it is recommended to use a progress bar that fills according to progress.

  • Bar height: min 4px
  • Bar fill: #C8C8C8 (default)
  • Progress fill: #0078D7 (default)
  • Fill animation: default left to right according to progress (direction may be reversed for specific locales)

Indeterminate options

When it is not possible or practical to show the approximate percentage of completion, you can use either an indeterminate progress bar or progress ring to indicate that an operation is ongoing.

Indeterminate progress bar

  • Animates: left to right, but may be reversed for specific locales as needed
  • Bar height: min 4px
  • Bar fill: #C8C8C8 (default)
  • Dots: 4px; #0078D7 (default)

Indeterminate progress ring

  • Animates: clockwise (regardless of locale)
  • Dot color: #0078D7 (default)
Standard sizes:
  • 6px dots in 60px ring
  • 4px dots in 20px ring

Best practices

  • Progress indicator and details should overlay content rather than displace it.
  • Keep progress in context. For example, in cases of list items where progress pertains to one or more items, ensure progress indicator and any details (i.e. like "Downloading…") are clearly associated to the respective progressing list item(s).

Demo

See the Pen Loading Animation Demo by Microsoft.com (@microsoft) on CodePen.

 

See the Pen Loading Animation Demo by Microsoft.com (@microsoft) on CodePen.

Resources