Spinner

Spinners indicate a loading state on either a full page or smaller component, like a menu, select or button.
Demo and Developer GuidelinesFigma Component

Anatomy

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.

Character count limit: 60

Placement

Loading in page area.

Behavior

Specifications

Styling

Standard Padding