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

Clarity has two types of spinners:

  • Page Spinners: For tracking the progress of an operation related to an entire page.
  • Inline Spinners: For tracking the progress of an operation related to a specific component.
.spinner

Use the .spinner to create a page spinner.

.spinner-inline

Extend the .spinner-inline class with .spinner to create an inline spinner.

.spinner-inverse

Extend the .spinner-inverse class with .spinner to create a spinner for dark backgrounds.

Examples

Page Spinners
Loading...
<span class="spinner">
    Loading...
</span>
Inline Spinners
Loading... Loading...
<span class="spinner spinner-inline">
    Loading...
</span>
<span>
    Loading...
</span>
Spinners on a dark background
Loading...
<span class="spinner spinner-inverse">
    Loading...
</span>

Spinner Sizes

Clarity spinners can be displayed in three sizes:

  • Small: This is the required sizing for inline spinners (see above). It measures 18x18 pixels.
  • Medium: Medium spinners measure 36x36 pixels.
  • Large: This is the default size for page spinners (see above).
Spinner sizes classnames

The classnames used to size spinners are: .spinner-sm, .spinner-md, and .spinner-lg. Note that using the .spinner-inline class will force a spinner to the small size and that .spinner-lg is the default sizing of page spinners.

Examples

Small
Loading...
<span class="spinner spinner-sm">
    Loading...
</span>
Medium
Loading...
<span class="spinner spinner-md">
    Loading...
</span>
Large (default)
Loading...
<span class="spinner spinner-lg">
    Loading...
</span>

Usage

Use the three sizes of spinners as follows:

Large
72px × 72px
72px × 72px Use to track the progress of an operation related to a page. For example, in the login form, a large spinner replaces the form fields while the data is being authenticated.
Medium
36px × 36px
36px × 36pxUse when content is being loaded, for example, in a table or datagrid.
Small
18px × 18px
18px × 18pxUse in constrained spaces, such as in an input field or next to a button. The spinner animates and the field or button is disabled until the action is complete.

Placement

Place the spinner where you want to focus users’ attention when the process completes.

Label

Optionally, provide a brief description of the process, for example, “Loading …”

Spinners Versus Progress Bars

Clarity provides a linear, indeterminate progress bar that serves the same use cases as a spinner. Using a spinner or an indeterminate progress bar is a matter of spacing, visual consistency, and the object the user selected to begin the process.