Shimmer
An animated text shimmer component for creating eye-catching loading states and progressive reveal effects.
Hello, this is a shimmer effect!
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Custom Duration
Control the animation speed with the duration prop:
Custom Spread
The spread prop controls the width of the shimmer effect:
Different HTML Elements
Use the as prop to render as different HTML elements:
AI Loading State
Perfect for indicating AI processing states:
Usage with AI SDK
Use shimmer effect to indicate AI processing:
+page.svelte
Props
Shimmer
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | The text content to display with shimmer effect |
content_length | number | 30 | The approximate length of the content for calculating shimmer spread |
as | keyof HTMLElementTagNameMap | "p" | The HTML element to render as |
duration | number | 2 | Animation duration in seconds |
spread | number | 2 | Shimmer spread multiplier (higher = wider shimmer) |
class | string | - | Additional CSS classes to apply |
...restProps | HTMLAttributes<HTMLElement> | - | All other HTML element props are supported |