Skip to main content

Spinner

The spinner component indicates ongoing processes or loading states. Use it to provide visual feedback when content is loading or an operation is in progress, helping users understand that the system is working.

Support
Targets (8)

Supported targets

Anchor to Use casesUse cases

  • Data loading: Indicate when product catalogs, customer lists, or order histories are being fetched.
  • Processing feedback: Show that an operation like payment processing, sync, or data submission is in progress.
  • Search results: Display a loading state while search results are being retrieved from the server.
  • Content transitions: Provide visual feedback during content transitions or screen loading.

Anchor to PropertiesProperties

Configure the following properties on the spinner component.

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 ExamplesExamples

Anchor to Show loading state with a spinnerShow loading state with a spinner

Display loading states using a spinner component. This example shows a basic spinner that indicates an ongoing process.

Show loading state with a spinner

Display loading states using a spinner component. This example shows a basic spinner that indicates an ongoing process.

Show loading state with a spinner

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

Anchor to Best practicesBest practices

  • Use for asynchronous operations: Display spinners during data fetching, form submission, or any operation that requires waiting time.
  • Provide accessibility labels: Always use accessibilityLabel to describe what is loading, helping screen reader users understand the context.
  • Position strategically: Place spinners where content will appear, or center them in the loading area to provide clear visual feedback.
  • Don't overuse: Avoid multiple spinners on the same screen. Use a single spinner to represent the overall loading state when possible.
  • Consider alternatives for long waits: For operations taking more than a few seconds, consider using status messages instead.
Was this page helpful?