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
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.