Loading Spinner - Usage

Basic Guidelines

The Loading Spinner uses animation to show that an activity is in progress. It is an indeterminate circular progress indicator, which means it keeps spinning until the process is complete.

The Loading Spinner is primarily used for in-page interactions, rather than full-page loads.

It can be used in combination with additional labelling to keep the user informed about the ongoing process.

Alignment

The Loading Spinner is used in the disabled variant of the Button. It can also replace the Button altogether if it’s used with a label. It should not replace the entire text within a Button.

If possible, using a Loading Spinner should not impact any elements on the page (i.e. not pushing an adjacent Button down or to the side).

The Button uses the Loading Spinner in its disabled state.

Replacing the Button text with the Loading Spinner.

Loading Spinners can also be used within Modals. While the Loading Spinner is active, the Modal content is dropped back and disabled. The Loading Spinner is positioned in the centre and must always have a label to inform the user about the process.

Processing...

Sizing

Ensure you always use the small variant of the Loading Spinner (default in Figma).

The Small size provides the right amount of padding.

The Regular size looks out of proportion on the Button.