[ @sdxc/ui/animations ]
shimmer
Sweeping highlight band for an indeterminate progress fill, resolved entirely to @keyframes so it runs from server-rendered markup and settles once the gate clears.
import { shimmer } from "@sdxc/ui/animations";Signature
shimmer<Node extends Element = Element>(options?: Shimmer.Options): Mixin<Node>Returns a @sdxc/u mixin ready for a progress indicator's fill element.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | Shimmer.Options | Timing, band width, and gating for the loop. |
Examples
<ProgressBar.Indicator mix={[shimmer()]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
Shimmer.Options
Tuning for a shimmer loop: timing, highlight width, and the platform state it runs under.
| Member | Type | Description |
|---|---|---|
duration? | string | Length of one sweep across the band, as a CSS time. Defaults to DEFAULT_SHIMMER_DURATION. |
easing? | string | CSS easing function driving the sweep. Defaults to DEFAULT_SHIMMER_EASING. |
bandSize? | string | Width of the moving highlight band, as a CSS length or percentage. Defaults to DEFAULT_SHIMMER_BAND_SIZE. |
outsideGate? | "hidden" | "visible" | What the host looks like outside the gate. "hidden" suits an element that exists only as a loading cue; "visible" keeps an element that carries its own content legible once the loop settles. Defaults to "hidden". |
when? | string | Selector fragment, relative to the host, that gates the loop. Defaults to DEFAULT_SHIMMER_WHEN; pass a custom fragment (e.g. [data-indeterminate="true"]) for a hand-built progress indicator. |