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 size size "base" | "large" | "large-100" Default: 'base'

Examples

<s-spinner accessibilityLabel="Loading" size="large-100" />

Preview

Examples

Code

jsx

<s-spinner accessibilityLabel="Loading" size="large-100" />

html

<s-spinner accessibilityLabel="Loading" size="large-100"></s-spinner>

Basic usage

Description

Standard loading spinner with accessibility label for screen readers.

jsx

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

html

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

Loading state in section

Description

Centered loading indicator with text in a section layout for content loading states.

jsx

<s-stack alignItems="center" gap="base" padding="large">
  <s-spinner accessibilityLabel="Loading products" size="large" />
  <s-text>Loading products...</s-text>
</s-stack>

html

<s-stack alignItems="center" gap="base" padding="large">
  <s-spinner accessibilityLabel="Loading products" size="large"></s-spinner>
  <s-text>Loading products...</s-text>
</s-stack>

Inline loading with text

Description

Compact inline loading indicator for form submissions and quick actions.

jsx

<s-stack direction="inline" alignItems="center" gap="small">
  <s-spinner accessibilityLabel="Saving" />
  <s-text>Saving...</s-text>
</s-stack>

html

<s-stack direction="inline" alignItems="center" gap="small">
  <s-spinner accessibilityLabel="Saving"></s-spinner>
  <s-text>Saving...</s-text>
</s-stack>

Anchor to best-practicesBest practices

Use to notify merchants that their action is being processed
Don't use for entire page loads

Was this page helpful?