Skip to content Shopify logoPolaris

Spinner

Spinners are used to notify merchants that their action is being processed. For loading states, spinners should only be used for content that can’t be represented with skeleton loading components, like for data charts.

Use to notify merchants that their requested action is being processed.

import{Spinner}from'@shopify/polaris';importReactfrom'react';functionSpinnerExample(){return<SpinneraccessibilityLabel=“转轮榜样”size="large"/>;}

Props

Want to help make this feature better? Pleaseshare your feedback.

interface SpinnerProps
size? 'small'|'large'

Size of spinner.

德faults to'large'.
accessibilityLabel? string

Accessible label for the spinner.
hasFocusableParent? boolean

Allows the component to apply the correct accessibility roles based on focus.

Accessibility

SVGs are often conveyed inconsistently to assistive technologies. TheSpinnercomponent’s accessibility is also highly contextual. When the parent component is focusable, you’ll need to set thehasFocusableParentprop for the appropriateroleattribute to be applied.

For optimal user experience, use theaccessibilityLabelprop to let assistive technology users know the purpose of the spinner.

最佳实践

The spinner component should:

  • Notify merchants that their request has been received and the action will soon complete.
  • Not be used to give feedback for an entire page load.
  • White can only be used with small spinners on actionable components like buttons.
  • On web, be used in conjunction with skeleton loading to represent non-typographic content. For example, line graphs on the Merchant analytics dashboard.

Content guidelines

Accessibility label

Spinner accessibility label should:

  • Accurately explain the state of the requested action. For example, “Loading”, “Submitting”, “Processing”.
  • Use as few words to describe the state as possible.

Related components