Spinner
The spinner component displays an animated indicator showing users 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. For button loading states, use the loading property on the button component instead. For operations with a known duration, use progress.
Spinner doesn't include built-in text. Pair it with layout and text components to describe the loading state.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to PropertiesProperties
Configure the following properties on the spinner component.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
A label that describes the purpose of the spinner for assistive technologies like screen readers. Provide an
when there is no visible text that conveys a loading state.- Anchor to idididstringstring
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 sizesizesize'base' | 'small' | 'small-100' | 'large' | 'large-100''base' | 'small' | 'small-100' | 'large' | 'large-100'Default: 'base'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 Show a loading indicatorShow a loading indicator
Display a basic spinner to indicate that content is loading. Set accessibility-label to provide context for screen readers.
Show a loading indicator
html
Anchor to Display a labeled loading stateDisplay a labeled loading state
Pair a spinner with text to describe what's loading. This example centers a spinner above a descriptive message so customers know what to expect.
html
Anchor to Adjust the spinner sizeAdjust the spinner size
Use the size property to render spinners at different scales. Smaller spinners work well inline with text, while larger spinners suit full-section loading states.
html
Anchor to Best practicesBest practices
- Always provide an accessibility label: Set
accessibility-labelso 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
loadingproperty 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.