SSpinner <s-spinner>

An animated indicator that content or an action is loading. SSpinner is the typed Vue 3 wrapper for Shopify's Polaris <s-spinner> web component.

import { SSpinner } from 'polaris-vue-elements'

Best practices

• Show it for slower async work. Use a spinner when something like saving a form, fetching data or processing an action takes longer than about 500ms. For actions that finish instantly, a spinner just flickers and distracts.
• Keep it local to what's loading. Place the spinner in the part of the page that's loading, such as a button that's saving or a section fetching its data, rather than blocking the whole interface.
• Say what's loading. Always set accessibilityLabel, for example "Loading products" or "Saving changes", so screen reader users know what's happening.
• Report the outcome afterward. Once the spinner goes away, show a clear success or error message so merchants know the operation finished and how it went.

<SSpinner accessibilityLabel="Loading products" />

See Shopify's best practices for <s-spinner> for the full guidance.

Example

<script setup>
import { SSpinner } from 'polaris-vue-elements'
</script>

<template>
  <SSpinner accessibilityLabel="Loading, small" size="base" />
  <SSpinner accessibilityLabel="Loading, large" size="large" />
  <SSpinner accessibilityLabel="Loading, extra large" size="large-100" />
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
size	"base" | "large" | "large-100"	The size of the loading spinner. - base: Default size suitable for inline loading indicators or standard UI contexts. - large: Larger spinner for more prominent loading states. - large-100: Extra large spinner for full-page or emphasized loading states.