Spinner
Spinner component is used as a loading indicator.
<sl-spinner size="xl"></sl-spinner>When to use
Feedback for Delays
If there's a delay in the response time, using a spinner can reassure users that their action is being processed, reducing uncertainty and impatience.
Processing Actions
Spinners are particularly useful in asynchronous operations where users might need to wait for a response without the system appearing frozen. This could include actions like submitting a form.
When not to use
Predictable Delays
If the delay is predictable and very short, less than a second, using a spinner might not be necessary and can even be distracting. When action happens instantaneously, like clicking a button that toggles something immediately visible on the interface, it doesn't require a spinner.
Dynamic Content
Avoid using a spinner when content is dynamically loaded or refreshed, use a skeleton instead. You can use a spinner during searching, which gives users immediate feedback that their action is processing. This enhances the perceived responsiveness of the application, but when it is loading, the new content is the skeleton.
Anatomy
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Spin Line | This section of the circular shape indicates the visual effect of something processing while it rotates. | no |
| 2 | Spin Shadow | The visual element that creates the circular shape, often resembling a ring. This shape serves as the base for the spinner animation. | no |
Figma Options
With these options, you can tweak the appearance of the spinner in Figma. They are available in the Design Panel so you can compose the spinner to exactly fit the user experience need for the use case you are working on.
| Item | Options | Description |
|---|---|---|
| Size | xs sm md lg xl 2xl 3xl | Indicates the size of the spinner. If not specified the default value is medium. |
<sl-spinner size="sm"></sl-spinner>
<sl-spinner size="md"></sl-spinner>
<sl-spinner size="lg"></sl-spinner>
<sl-spinner size="xl"></sl-spinner>
<sl-spinner size="2xl"></sl-spinner>
<sl-spinner size="3xl"></sl-spinner>Sizing
The size of the spinner can be set with an attribute on the component, or, on a higher level, with a CSS-property. This will come in handy if you use multiple spinners in the same container that all need to be the same size.
API
Component has a range of properties to define the experience in different use cases.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
size | size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | undefined | The size of the spinner. Defaults to `md` with css properties if not attribute is not set. |
CSS Properties
| Name | Description |
|---|---|
--sl-spinner-size | The size of the spinner, defaults to `md` if not set. |
Here are considerations to make the spinner accessible for all users.
Accessibility Considerations
Here are key considerations to make the spinner usable for all users, including those with disabilities.
When updating only a portion of a page, place the spinner in that specific part of the page.
If you aren't clear about where to place the spinner, set it where you want the user's attention to be after complete loading.
The spinner is unaffected by reduced motion. Disabling it can confuse the user as it might seem like the process has stopped.
WAI-ARIA
In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used.
Attributes that we recommend you add in certain scenarios are mentioned below.
The spinner itself doesn't have meaning for screenreaders; you can't use it to communicate that the loading is complete. Therefore we hide it for screenreaders using role and aria-hidden attributes, but you can set some properties on the container where the content is being loaded. You can for example use aria-busy=true on a container that is an aria-live region to indicate an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. Live regions (even those set to polite) should be used sparingly because you don't want to disturb the user too much. They should be used only in important cases where the user is waiting for feedback on an action they carried out, or when an error or warning that has an impact on the user experience occurs.