---
title: Spinner
description: Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the 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

Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the 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/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/spinner-default-BoWETSkc.png)

### Examples

* #### Code

  ##### Default

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