Skip to main content

Spinner

Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the Button component instead.

Anchor to propertiesProperties

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context. Providing an accessibilityLabel is recommended if there is no accompanying text describing that something is loading.

Anchor to id
id
string

A unique identifier for the element.

Anchor to size
size
'small' | 'large' | 'base' | 'small-100' | 'large-100'
Default: 'base'

Adjusts the size of the spinner icon.

Was this section helpful?

Code

<s-spinner></s-spinner>

Preview