[ @sdxc/ui/animations ]
spin
Continuous 360° rotation for a busy indicator's glyph, resolved entirely to @keyframes so it runs from server-rendered markup.
import { spin } from "@sdxc/ui/animations";Usage
Continuous 360° rotation for a busy indicator's glyph, resolved entirely to
@keyframes so it runs from server-rendered markup. Under
prefers-reduced-motion: reduce, a gentle opacity breathe carries it.
Signature
spin<Node extends Element = Element>(options?: Spin.Options): Mixin<Node>Returns a @sdxc/u mixin ready for a spinner's host element.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | Spin.Options | Timing and gating for the loop. |
Examples
<Spinner mix={[spin()]} aria-label={t("status.loading")} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
Spin.Options
Tuning for a spin loop: timing and the platform state it runs under.
| Member | Type | Description |
|---|---|---|
duration? | string | Length of one full rotation, as a CSS time. Defaults to DEFAULT_SPIN_DURATION. |
easing? | string | CSS easing function driving the rotation. Defaults to DEFAULT_SPIN_EASING. |
when? | string | Selector fragment, relative to the host (e.g. [aria-busy="true"]), that gates the loop. Left unset, the loop runs as soon as it is mixed in, matching a spinner that is mounted only while busy. |