---
title: Spinner
description: >-
  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](/docs/api/checkout-ui-extensions/2026-04/web-components/actions/button)
  component instead.
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 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](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/button) component instead.

### Support Targets (29)

### Supported targets

* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## Properties

* **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

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/spinner-default-BoWETSkc.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-spinner></s-spinner>
  ```