Progress indicator

Sizes

Use this Large size Progress indicator for page loads, this size can also include an icon and/or a label. See Loading guide for page load patterns.

The smaller sizes are suitable for use in components ie buttons or fields. See Loading guide for component patterns.

Dark backgrounds

The indicator can appear white for use on dark backgrounds.

User experience

Use this component within loading patterns. Predominantly the user experience direction is dictated by the pattern that contains it.

Visual design

Simplicity is the key design requirement for this component. It has an intentional minimal form and simple animation, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the file size.