Skip to main content Skip to navigation Skip to search

Spinner

A spinner is visual indicator of an ongoing, user-initiated process.

Usage

Use a spinner to offer visual feedback to show users their action is processing. Below is a comparison of spinner usage with progress bar usage.

Loading...

Spinner Usage

  • When you want to indicate "This will be a moment". Between 1-10 seconds
  • When progress cannot be indicated by percentage
  • When space is limited
87%

Progress Bar Usage

  • To want to indicate "This will take awhile, here is an estimate". More than 10 seconds
  • When progress can be indicated by percentage
  • When space permits

Types

Clarity has two types of spinners.

Page Spinner

When the operation to be tracked is related to the entire page.

Loading...

Inline Spinner

When the operation being tracked is related to a specific component or section on a page.

Loading... Loading...

Inverse Spinner

When there is a dark background behind a spinner, use the inverse to make it accessible.

Loading...

Sizes

Large

Large spinners have 3rem (72px) width and height. Use them to track progress of an operation that is related to the page. For example, while a form is being authenticated, use a large spinner on top of or in place of the form controls.

Loading...

Medium

Medium spinners have 1.5rem (36px) width and height. Use them to track progress when content is being loaded. For example when data for a table or datagrid is being loaded.

Loading...

Small

Small spinners have 0.75rem (18px) width and height. Use them in constrained spaces like an input field or next to a button. While the spinner is animating and active the input field or button should be disabled until the action is complete.

Loading...

Label

An optional label can be projected into the element that describes the process.