Loading Indicator

The loading indicator shows the user that an external process, like a connection, is being executed.

loading indicator default size

Usage

Use the loading indicator to inform the user that there is pending content from the server that will load where the indicator is displayed. Without this indicator, the user can feel lost or navigate away from the page prematurely.

Please don’t use loading indicators inside buttons. If you need a loading indicator for an action triggered by a button, place the loading indicator on one of the sides of the button.

Types

Default

loading indicator default size

Size

Use the sizes below to respond to different device sizes:

SizeDescription
Small10px
Default16px
Medium32px
Large64px

Variations

Positive

loading indicator default positive

Negative

loading indicator default negative

Menu