A band of light that sweeps across text, using
class="shimmer". Use it to show that something is
working, like a reply that is being written.
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/shimmer.css" />Default
The text is a muted mix of its own color, and the band shows the full color. This works on any text and in dark mode. The animation stops when the user prefers reduced motion.
Generating response...
<p class="shimmer" role="status">Generating response...</p>Color
Set --shimmer-color to change the color of the band, and
--shimmer-muted to change the color of the text below
it.
Generating response...
<p class="shimmer" style="--shimmer-color: var(--ui-primary)">
Generating response...
</p>Duration
Set --shimmer-duration to change how long one sweep
takes. The default is 2s.
Generating response...
<p class="shimmer" style="--shimmer-duration: 1s">Generating response...</p>Spread
Set --shimmer-spread to change how wide the band is. The
default is calc(3ch + 40px).
Generating response...
<p class="shimmer" style="--shimmer-spread: 8rem">Generating response...</p>Angle
Set --shimmer-angle to tilt the band. The default is
20deg.
Generating response...
<p class="shimmer" style="--shimmer-angle: 45deg">Generating response...</p>Reverse
The band moves in the reading direction, so it goes right to left in
right to left text. Add reverse to flip it.
Generating response...
<p class="shimmer reverse">Generating response...</p>Play once
Add once to sweep one time only, for example when a task is done.
Response generated.
<p class="shimmer once" style="--shimmer-duration: 1.1s">Response generated.</p>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Direction | .reverse |
Sweeps against the reading direction |
| Repeat | .once |
Sweeps one time, then stops |
| Color | --shimmer-color |
Color of the band. Defaults to the text color |
| Muted color | --shimmer-muted |
Color of the text under the band |
| Duration | --shimmer-duration |
Time of one sweep |
| Spread | --shimmer-spread |
Width of the band |
| Angle | --shimmer-angle |
Tilt of the band |