Spinner
<ahi-spinner> | AhiSpinner
Spinners are used to notify users that their action is being processed. For loading states, spinners should only be used for content that can’t be represented with skeleton loading components, like for data charts.
<ahi-spinner></ahi-spinner>
Examples
Size
Use the size attribute to change a spinner’s size. Sizes are small (16px),
medium (20px, the default) and large (32px).
<ahi-spinner size="small"></ahi-spinner>
<ahi-spinner size="medium"></ahi-spinner>
<ahi-spinner size="large"></ahi-spinner>
For a size outside those, set the width and height on the spinner itself or on a parent element. An inline
size wins over the size attribute.
<ahi-spinner style="width: 3rem; height: 3rem;"></ahi-spinner>
<ahi-spinner style="width: 4rem; height: 4rem;"></ahi-spinner>
Color
The spinner’s color can be changed by setting the –color CSS variable.
<ahi-spinner style="--color: hotpink;"></ahi-spinner>
Best practices
Spinners should:
- Notify users that their request has been received and the action will soon complete.
- Not be used to give feedback for an entire page load.
- White can only be used with small spinners on actionable components like buttons.
- Be used in conjunction with skeleton loading to represent non-typographic content. For example, line graphs on the analytics dashboard.
Content guidelines
Spinner accessibility label should:
- Accurately explain the state of the requested action. For example, “Loading”, “Submitting”, “Processing”.
- Use as few words to describe the state as possible.
Related components
- To improve user experience and reduce the appearance of long loading times, use the progress bar component.
- To better represent loading content, use the skeleton component.
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/spinner/spinner.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/spinner/spinner.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
label
|
A custom label for assistive devices. |
string
|
''
|
|
size
|
The spinner’s size. Presentational only — a spinner is not an interactive target, so this does not
participate in --ahi-target-min-size.
|
'small' | 'medium' | 'large'
|
'medium'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Custom Properties
| Name | Description | Default |
|---|---|---|
--color |
The color of the spinner’s indicator. | var(–ahi-interactive) |
--speed |
The time it takes for the spinner to complete one animation cycle. | var(–ahi-transition-x-slow) |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the spinner part instead. |
spinner |
The component’s outer wrapper. |
Learn more about customizing CSS parts.