Shimmer
Shimmer is a loading skeleton component that displays animated placeholders while content is being loaded. It provides visual feedback to users during data fetching or processing operations, improving the perceived performance of your application.
Loading Code Block...Full example
Section titled “Full example”A basic shimmer block with a fixed width, height, and medium border radius.
Loading Code Block...Border Radius
Section titled “Border Radius”Control the corner roundness of the shimmer block using the `rounded` prop. Use the dropdown in the interactive demo below to toggle between different border radius values.
Loading Code Block...Card Layout
Section titled “Card Layout”Shimmer components can be combined to create complex loading layouts that mimic actual content structures.
Loading Code Block...Bar Chart
Section titled “Bar Chart”Compose multiple shimmer blocks to mimic a placeholder bar chart while real data is loading.
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| width* | - | number | string | The width of the shimmer component. Can be a number (in pixels) or a CSS width value (e.g., '100%', '50px'). |
| height* | - | number | string | The height of the shimmer component. Can be a number (in pixels) or a CSS height value (e.g., '20px', '100%'). |
| rounded | none | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | The border radius of the shimmer component. |
Accessibility
Section titled “Accessibility”- Shimmer is a purely decorative loading placeholder. The component renders a single empty
<div>with no children, so it carries no accessible name or role — screen readers traverse past it without announcing anything. - The component does not currently honor
prefers-reduced-motion; the gradient animation runs continuously. If a page is rendering many Shimmer blocks for motion-sensitive users, wrap the loading region in your own@media (prefers-reduced-motion: reduce)rule (e.g. setanimation: noneon.shimmer-bginside that scope) until first-party support lands. - For longer loads, pair Shimmer with a live region (
aria-live="polite"on a sibling status element) so assistive tech announces “Loading…” and the completion state — the shimmer itself does not.