---
title: Spinner
description: >-
Displays an animated loading indicator for ongoing operations like data
fetching, payment processing, or form submission.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner
md: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner.md
---
# 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](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/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
* [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/navigation#navigation-target)
* [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/block#block-target)
* [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#line-item-targets)
* [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-cart-line-list-)
* [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/information#information-target)
* [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-delivery-address-)
* [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#delivery-address-targets)
* [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/footer#footer-target)
* [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/header#header-target)
* [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#render-after-payment-methods-)
* [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#payment-targets)
* [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#render-after-pickup-locations-)
* [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-list-targets)
* [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-option-item-target)
* [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#render-after-pickup-points-)
* [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#pickup-points-targets)
* [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-reductions-after-)
* [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#reductions-targets)
* [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-item-targets)
* [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-option-)
* [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-options-)
* [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-list-targets)
* [purchase.thank-you.announcement.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/announcement#thank-you-announcement-)
* [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/block#block-target)
* [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#line-item-targets)
* [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#thank-you-cart-line-list-)
* [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/information#information-target)
* [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/footer#footer-target)
* [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/header#header-target)
#### Use cases
* **Data fetching**: Indicate that product details, inventory, or pricing information is loading.
* **Payment processing**: Communicate that a payment transaction is being processed.
* **Form submission**: Signal that a submitted form is being validated or saved.
* **Content loading**: Display a loading state while sections of the checkout render dynamically.
***
## Properties
Configure the following properties on the spinner component.
* **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.
* **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.
* **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.
***
## Examples
### Display 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
## html
```html
```
### Pair 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
```html
Updating your total
```
### Frame 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
```html
Loading order details...
```
***
## Best 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.
***