---
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: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback/spinner
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback/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

* #### Code

  ##### Default

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/spinner-default.gif)