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 can be added next to / into a Button, or replace the Button altogether if it’s used with a label. It should not replace the entire text within a Button.

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

Adding or replacing an existing icon with the icon ‘spinner’.

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

Use the ‘Small’ variant for the Loading Spinner if its used within a Button.

The Small size provides the right amount of padding.

The Regular size looks out of proportion on the Button.