Spinner

A component that indicates loading or processing

Spinner

Usage


Loading spinners are used to inform the user that an action may need more time to process. They help reduce a user’s uncertainty during loading/process and helps to acknowledge that a user’s action has been received by the system.

Types

Circular Loading Spinners (Default)

Circular loading spinners are used for short processes. They are commonly used to display the loading of a page screen or when a simple action is being performed.

Spinner

Hourglass

Hourglass loading spinners are used for longer processes. They are commonly used to show the processing of an activity on a page. Hourglasses are most useful when the process time can vary significantly, such as waiting for proposals.

Hourglass spinner

Placement

Circular loading spinners are placed in the position of the process that they represent.

Spinner Center positioning

Centered circular progress indicators display the initial loading of a page content.

Above content positioning

Circular progress indicators that are positioned above the content display that new content will appear.
Spinner

Sizes


Circular loading spinners

Small

Dimension: 24px by 24px

Size small

Mid

Dimension: 48px by 48px

Size mid

Large

Dimension: 64px by 64px

Size large

Specs


Circular loading spinners

spinner spec

Hourglass loading spinners

spinner spec