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 to create a page spinner.
.spinner-inline class with
.spinner to create an inline spinner.
.spinner-inverse class with
.spinner to create a spinner for dark backgrounds.
<span class="spinner"> Loading... </span>
<span class="spinner spinner-inline"> Loading... </span> <span> Loading... </span>
Spinners on a dark background
<span class="spinner spinner-inverse"> Loading... </span>
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-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.
<span class="spinner spinner-sm"> Loading... </span>
<span class="spinner spinner-md"> Loading... </span>
<span class="spinner spinner-lg"> Loading... </span>
Use the three sizes of spinners as follows:
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.|
36px × 36px
|Use when content is being loaded, for example, in a table or datagrid.|
18px × 18px
|Use 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.|
Place the spinner where you want to focus users’ attention when the process completes.
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.