Loading & Progress Indicators

Progress - Determinate

Progress - Label and Status

Progress - Indeterminate

Usage

• Display when an entire page or large area of the page is loading.
• While not required, if we know how long loading will take, we should include a counter indicating the percentage of process completion.

Accessibility

We should use the <progress> tag wherever possible.

<!-- determinate -->
<progress value="30" max="100">30%</progress>

<!-- labels -->
<div>
  <label for="progress-1">Processing...</label>
  <progress id="progress-1" value="75" max="100">75%</progress>
  <label for="progress-1">75%</label>
</div>

<!-- aria-label alternative -->
<progress value="75" max="100" aria-label="Loading...">75%</progress>

<!-- indeterminate: remove `value` and `max` attr -->
<progress aria-label="Content loading..."></progress>

Square Animations

We recommend using this portable animated SVG so it can scale beautifully as well as be styled with future theme tokens. If we need to support legacy browsers, use the animated GIF as a fallback.

Usage

• Loading that is specific to one area of the page
• When loading time is indeterminate

Whether to use the Red Square Animation or Gray Square Animation should be determined based on how visually prominent you need the loader to be.