Spinner
Spinner shows that something is loading. On its own it sits inline; wrapped around content it covers that content while loading. Brutal draws an ink border ring, Elegant a growing SVG arc.
Demos
Size
Four named sizes, or any size in px. The spinner takes its container’s text color; on a colored fill, set that to the fill’s text-on-fill color and use variant="inverse" for a stronger track.
Description
Covering content
With children, the spinner sits over them and dims them while show is true; the content is marked aria-busy and can’t be clicked.
Delay
delay waits before showing, so a quick operation never flashes a spinner. Hiding is immediate.
Custom icon
icon replaces the ring and spins it; rotate={false} keeps it still.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
size | xs | sm | md | lg | number | sm | A named size or px. | Unreleased |
variant | default | inverse | default | inverse strengthens the track for colored backgrounds; the color itself comes from the container’s text color. | Unreleased |
description | ReactNode | undefined | Text under the spinner. | Unreleased |
children | ReactNode | undefined | Content to cover while loading. | Unreleased |
show | boolean | true | Shows the spinner; with children, false also un-dims them. | Unreleased |
delay | number | undefined | Milliseconds to wait before showing. | Unreleased |
icon | ReactNode | undefined | Replaces the ring. | Unreleased |
rotate | boolean | true | Spins a custom icon. | Unreleased |
contentClassName | string | undefined | Class for the covered content. | Unreleased |
contentStyle | CSSProperties | undefined | Style for the covered content. | Unreleased |
The spinner is a role="status" element named from the locale (“Loading” / “加载中”); pass aria-label to say what is loading. Without children the root is an inline span, with children a block div; ref and other attributes go to that root.