Studio
2

Shimmer

Usage

Import shimmer from @mielui/svelte/actions/shimmer and add use:shimmer to a container. The action takes no options. It clips the highlight to the container's rounded corners without moving its content.

<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. Keep the message short and use a status region for loading feedback.

Skeleton

Use variant="shimmer" on Skeleton for the same effect. The default variant stays still.

Accessibility

The highlight is hidden from assistive technology. Give the loading region an accessible label. Reduced motion removes the animation, including when the preference changes while the page is open. The animation pauses while its element is offscreen or the document is hidden. Unmounting removes the highlight and restores the container's positioning.

Finish loading

Remove the action when the work finishes. Replace the pending message with a useful result instead of leaving an indefinite loading effect.

API reference

shimmer attaches to an HTMLElement and accepts no options. Removing the element destroys the animation and restores its original positioning. Text-only nodes shimmer through their glyphs; containers receive a clipped highlight.