---
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-01/polaris-web-components/actions/button)
  component instead.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/spinner
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-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-01/polaris-web-components/actions/button) component instead.

## Properties

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

* **id**

  **string**

  A unique identifier for the element.

* **size**

  **'small' | 'large' | 'base' | 'small-100' | 'large-100'**

  **Default: 'base'**

  Adjusts the size of the spinner icon.

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