Spinner
Spinners indicate a loading state on either a full page or smaller component, like a menu, select or button.
Demo and Developer GuidelinesAnatomy
Variations
Sizes
Color
Spinners can different colors depending on the use case. Gray spinners are the most commonly used color and can be seen on full pages or menus. Blue spinners are mainly used for inputs that are in focus. White spinners are used for any dark or color background where gray would not be visible.
Label
An optional label can be included below the large or medium spinner. This label will wrap if needed.
Spinner labels are sentence case without punctuation unless it’s a proper noun or a user-inputted label.
Spinner labels are sentence case without punctuation unless it’s a proper noun or a user-inputted label.
Placement
Loading in page area.
Behavior
Specifications
Styling
Standard Padding