Skip to content

Feedback

Spinner

A loading indicator that inherits currentColor.

stableNo JS requiredhydrateless/spinner.css

A loading indicator that inherits currentColor. Use role="status" with an aria-label so it is announced. CSS-only.

Playground

Live

Props

The framework bindings expose these props (and forward the rest to the root element).

PropTypeDefaultDescription
size'sm' | 'md' | 'lg' | 'xl''md'Diameter of the spinner.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variableUsed for
currentColorThe spinner inherits the parent text color.

Accessibility

  • Wrap it in role="status" with an aria-label so the loading state is announced.
  • The animation pauses under prefers-reduced-motion.

Released under the MIT License.