Skip to main content

Spinner

The spinner component displays an animated indicator showing buyers that content or actions are loading. Use spinner to communicate ongoing processes like fetching data, processing requests, or waiting for operations to complete.

Spinners support multiple sizes and should be used for page or section loading states. Pair spinners with visible text to explain what is loading. For button loading states, use the loading property on the button component instead.

Spinner doesn't include built-in text. Pair it with layout and text components to describe the loading state.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the spinner component.

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose of the spinner for assistive technologies like screen readers. Provide an accessibilityLabel when there is no visible text that conveys a loading state.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

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

The size of the spinner icon.

  • base: The default size, suitable for most use cases.
  • small: A compact size for secondary loading states.
  • small-100: The smallest size for tight spaces or inline indicators.
  • large: A larger size for more prominent loading states.
  • large-100: The largest size for full-page or section-level loading indicators.

Anchor to ExamplesExamples

Anchor to Display a basic spinnerDisplay a basic spinner

Indicate an ongoing loading operation. This example renders a default s-spinner to signal that content is being loaded.

Display a basic spinner

A rendered example of the spinner component

html

<s-spinner accessibilityLabel="Loading"></s-spinner>

Anchor to Pair a spinner with loading copyPair a spinner with loading copy

Pair a large spinner with visible loading text. This example sets size and accessibilityLabel and places helper text beside the spinner.

html

<s-stack direction="inline" gap="small" alignItems="center">
<s-spinner size="large" accessibilityLabel="Updating your total"></s-spinner>
<s-text>Updating your total</s-text>
</s-stack>

Anchor to Frame a spinner in a subdued boxFrame a spinner in a subdued box

Place a spinner inside a styled content area. This example wraps the spinner and text in an s-box with a subdued background as a loading placeholder.

html

<s-box padding="large" background="subdued" borderRadius="base">
<s-stack alignItems="center" gap="small">
<s-spinner accessibilityLabel="Loading order details"></s-spinner>
<s-text color="subdued" type="small">Loading order details...</s-text>
</s-stack>
</s-box>

Anchor to Best practicesBest practices

  • Always provide an accessibility label: Set accessibilityLabel so screen readers can announce what's loading.
  • Use spinners for page or section loading, not buttons: For button loading states, use the button's built-in loading property instead.
  • Pair with descriptive text: Spinners alone don't explain what's happening. Add nearby text that describes the operation in progress.
  • Choose the right size for the context: Use smaller spinners for inline or compact layouts, and larger spinners for full-section loading states.
Was this page helpful?