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.
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.
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.
Circular loading spinners are placed in the position of the process that they represent.
| 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. | |
---|
Circular loading spinners
Small
Dimension: 24px by 24px
Mid
Dimension: 48px by 48px
Large
Dimension: 64px by 64px
Circular loading spinners
Hourglass loading spinners