Basic
Add .text-shimmer to a short label that reports work in progress.
Thinking… Generating a reply… Searching the web… Reading 3 files…
With a loader
Put an empty .text-shimmer-loader before the label. One element, a small spinner in the text color.
Thinking… Generating a reply… Searching the web… Reading 3 files…
Thinking…
Thinking…
Colors
The text keeps its own color, so any text utility works.
Thinking…
Thinking…
Thinking…
Thinking…
Thinking…
Sizes
The shimmer follows the font size.
Thinking…
Thinking…
Thinking…
Thinking…
Speed
Set --tblr-text-shimmer-duration to change the speed of one sweep.
Thinking…
1s
Thinking…
2s
Thinking…
4s
Contrast
Set --tblr-text-shimmer-opacity to dim the text more or less between sweeps.
Thinking…
0.2
Thinking…
0.4
Thinking…
0.7
In a chat
A shimmering label stands in for the reply until it arrives.
AI
Reading the file…