Shimmer & Loader.
Something is happening.
Shimmer sweeps light across a label such as Thinking…; Loader is three pulsing dots for a reply on its way. Both turn static with reduced motion.
Make it yours
Preparing the example…
Composition
AnatomyShimmer is purely visual: announce progress elsewhere, for example through Conversation's status. Loader announces its label once.
Shimmer (as, duration) — text with a moving gradient
Loader (label) — role=status, three aria-hidden dots + visually hidden labelA place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
Details that make a difference
Examples & statesThe finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native HTML attributes and refs are forwarded. The table covers Dixy’s own options.
ShimmerOwn
| Prop | Type / description | Default |
|---|---|---|
as | ElementTypeThe element to render. | span |
duration | numberSweep duration in seconds. With reduced motion the text is static. | 2 |
Loader
| Prop | Type / description | Default |
|---|---|---|
label | stringAccessible name. | Loading |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-color-text-primary | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityShimmer text is read normally; the sweep is decoration. Loader is a status with a label. With reduced motion or Theme effects set to reduced, both stop animating and stay legible.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
background-clip: text paints a gradient through the letters; animating its position is cheap and needs no extra DOM.
--dixy-color-text-primary