# Shimmer

Import shimmer from @mielui/svelte/actions/shimmer. Apply use:shimmer to a container. No options are required.

The decorative highlight respects rounded corners and reduced motion. Unmounting cancels the animation and restores positioning. Add an accessible loading label to the region.

Skeleton supports variant="default" | "shimmer". The default is still.

```svelte

<script lang="ts">
    import { shimmer } from '@mielui/svelte/actions/shimmer';
</script>

<div class="w-64 space-y-3" aria-label="Loading profile" role="status">
    <div use:shimmer class="h-12 w-12 rounded-full bg-secondary"></div>
    <div use:shimmer class="h-4 rounded-md bg-secondary"></div>
    <div use:shimmer class="h-4 w-2/3 rounded-md bg-secondary"></div>
    <span class="sr-only">Loading profile…</span>
</div>


```

## Text

On a plain-text element, the highlight moves through the letters. Use a status region for loading feedback.

```svelte

<script lang="ts">
    import { shimmer } from '@mielui/svelte/actions/shimmer';
</script>

<p role="status" class="text-base text-foreground-muted">
    <span use:shimmer class="inline-block">Thinking…</span>
</p>


```