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 (10)
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Anchor to PropertiesProperties
Configure the following properties on the spinner component.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
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
is recommended if there is no accompanying text describing that something is loading.- Anchor to idididstringstring
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
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
accessibilityLabelto 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?