# 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; reduced motion breathes the fill's opacity instead.

```ts
import { shimmer } from "@sdxc/ui/animations";
```

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; reduced motion breathes the fill's opacity instead.

## Signature

```ts
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

```tsx
<ProgressBar.Indicator mix={[shimmer()]} />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/animations` too.

### Shimmer.Options

Tuning for a shimmer loop: timing, highlight width, and the platform
state it runs under.

#### Members

| 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. |