MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

This article describes the use of progress bars and activity toolboxes. Progress and activity indicators provide the user with visual feedback that a process (such as a resource loading) is active.

Notes

Activity spinners contained within a modal dialogue are used when:

  • Other actions can’t be performed until the device has completed its task or is explicitly stopped.
  • An unknown amount of data is being received or the duration of the task being performed cannot be predicted.

Activity bars contained within a modal dialogue are typically used as a precursor to a modal progress bar while waiting for a server response or calculating the duration of a task.

Progress bars within a modal dialogue are used when the following conditions are met:

  • Other actions can’t be preformed until the device has completed its task, or is explicitly stopped.
  • A known amount of data is being received or when the duration of the task being preformed can be predicted.

An inline activity spinner (A) animates while the activity is progressing and the amount of data received is unknown or when the duration of the task being performed cannot be predicted. It does not prevent the user from performing other tasks.

The inline activity bar (B) animates while the activity is progressing and the amount of data received is unknown or when the duration of the task being performed cannot be predicted. It does not prevent the user from performing other tasks.

The inline progress bar (C) animates while the activity is progressing and there is a known amount of data received or when the duration of the task being performed can be predicted. It does not prevent the user from performing other tasks.

A cancel button (D) can be added to the progress bar if the progress can be interrupted.

Implementation guides

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, sidgan, chrisdavidmills-github
 Last updated by: chrisdavidmills,