Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The placement of a progress indicator can indicate the scope of a process. Linear progress indicators should only be placed at the top or in the center of a container or component. For example:

  • A linear progress indicator attached to the top a container, such as a card indicates the process applies to that particular item (and that interaction with the rest of the UI is possible)

Image Added

  • A linear progress indicator at the center of the screen should indicate loading all screen content (and that no interaction is possible until complete)

...

Image Added

When integrated to form elements (e.g. file upload), it may be placed to the right of the label\field pair. It may also be placed underneath the field depending on available screen real estate or responsive design.

...