Shimmer

A shimmer is a line of words that says work is under way: "Thinking", "Searching 14 files", "Deploying". The words rest at a little over half the ink of the text around them and a band of that ink in full passes over the letters, so the line brightens where the light is and never changes hue. Put shimmer on the element that holds the words.

<p class="shimmer text-sm" role="status">Thinking…</p><p class="shimmer text-sm" role="status">Searching 14 files for “corner-shape”</p>

#Words, not a placeholder

A skeleton stands for content whose shape is known and whose words are not. A spinner says something is happening and nothing else. A shimmer is for the case in between: you can say what is happening, in words, and the words are the status.

The light is a background clipped to the text. The words stay real text: they can be selected, copied, translated and read aloud. The box shrinks to the width of the words, so the light crosses the words and not the empty room beside them.

#With other parts

The class sets no size and no weight, so the line takes the type of the place it stands in: a turn of a conversation that has not arrived yet, a step that is running, a title while its page loads.

<div class="flex flex-col">  <div class="message message-sent">    <div class="message-bubble">What changed in the last release?</div>  </div>  <div class="message">    <div class="message-bubble">      <span class="shimmer" role="status">Reading the changelog…</span>    </div>  </div></div><ol class="steps steps-vertical">  <li class="steps-item">    <div class="steps-body">      <p class="steps-title">Install dependencies</p>    </div>  </li>  <li class="steps-item" aria-current="step">    <div class="steps-body">      <p class="steps-title shimmer">Building 212 pages</p>    </div>  </li>  <li class="steps-item">    <div class="steps-body">      <p class="steps-title">Deploy</p>    </div>  </li></ol>

#Tuning

--shimmer-duration is the time of one pass, two seconds by default; a long sentence can take three. --shimmer-color is the ink of the words at rest and --shimmer-light the ink of the band; both are mixed from the current color, so the line reads on a page, in a card and on the ink of a sent message alike.

With prefers-reduced-motion: reduce the band is removed and the line rests in its quieter ink. Its words still say what is happening.

#Accessibility

• Give the line role="status" when it appears or changes while the reader is on the page, so the words are announced. One status region per task is enough.
• Replace the line with its result; do not leave a shimmer running beside content that has arrived.
• The effect is decoration. Everything it means is in the words.

#Classes

#Custom properties

#Related

• SkeletonThe shape of content that is on its way.
• SpinnerA fine ring for work of unknown duration.
• MessageOne turn of a conversation, as a bubble that points at its author.

#Source

/* * Shimmer: a line of words that says work is under way, with a band of light passing over the letters. * The words rest at a little over half the ink of the text around them and the band is that ink in full, so * the line brightens where the light is, never changes hue and reads on any surface it is put on. It is drawn as a background clipped to the text, which leaves the words selectable and real. * With reduced motion the line rests in muted ink; in forced colors it is plain text. */@layer components {  .shimmer {    --shimmer-color: color-mix(in oklab, currentColor 56%, transparent);    --shimmer-light: currentColor;    --shimmer-duration: 2s;    /* The box is as wide as the words, so the light crosses the words and not the room beside them. */    width: fit-content;    max-width: 100%;    background:      linear-gradient(100deg, transparent 38%, var(--shimmer-light) 50%, transparent 62%) 150% 0 / 300% 100% no-repeat,      linear-gradient(var(--shimmer-color), var(--shimmer-color));    background-clip: text;    /* The fill is cleared, not the color: the ink above is still the color of the text around the line. */    -webkit-text-fill-color: transparent;    /* Linear: the light crosses at one speed and the loop has no seam to rest at. */    animation: shimmer-sweep var(--shimmer-duration) linear infinite;    @media (prefers-reduced-motion: reduce) {      background: none;      -webkit-text-fill-color: var(--shimmer-color);      animation: none;    }    @media (forced-colors: active) {      background: none;      -webkit-text-fill-color: currentColor;      animation: none;    }  }}@keyframes shimmer-sweep {  to {    background-position: -50% 0, 0 0;  }}