Spinner

Spinner component is used as a loading indicator.

Usage

Code

Accessibility

<sl-spinner variant="accent" 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.

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

Variants

Spinner come in various versions, each suited for specific situations:

Default: The standard spinner appearance is suitable for general use cases without specific emphasis or contextual meaning.
Accent: Used to highlight spinners in areas that require additional attention or emphasis, typically to draw focus to important actions or processes within the interface.
Info: Utilized to indicate spinners associated with informational content or actions, providing users with feedback on ongoing processes or informative updates.
Success: Used to indicate successful actions or processes, showing users that an operation is successful or that progress will have a positive outcome.
Warning: Associated with warning or cautionary messages or actions, alerting users to potential issues or risks that require their attention or further action to mitigate.
Danger: Reserved for spinners that indicate potentially critical actions, alerting users to processes that may have negative consequences if not handled carefully or resolved promptly.

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`.
Variant	`default` `light` `accent` `info` `success` `warning` `danger`	Indicates the variant of the spinner.

<sl-spinner size="sm"></sl-spinner>
<sl-spinner variant="accent" size="md"></sl-spinner>
<sl-spinner variant="info" size="lg"></sl-spinner>
<sl-spinner variant="danger" size="xl"></sl-spinner>
<sl-spinner variant="warning" size="2xl"></sl-spinner>
<sl-spinner variant="success" 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' \| undefined`		The size of the spinner. Defaults to `md` with css properties if not attribute is not set.
`variant`	`variant`	`'accent' \| 'info' \| 'danger' \| 'success' \| 'warning' \| undefined`		The spinner variant.

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

WAI-ARIA Roles, States, and Properties for an spinner provide essential information to assistive technologies and screen readers. They convey the spinner's role and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.

Attribute	Value	Description	User suppliedSpecifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)
`role`	`'presentation'`	The spinner itself it not sementically relevant, so we use this to remove meaning. See [Note 1] below for more explanation.	no
`aria-hidden`	`true`	The spinner itself it not sementically relevant, so we use this to hide is from assitive technology. See [Note 1] below for more explanation.	no

Notes:

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, 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.

Interactive example