@keyframes + gradient

A skeleton that does not lie about the layout

CaveatA skeleton whose blocks are not the size of the real content is worse than a spinner: the page visibly rearranges the moment data lands. Match the line heights and widths you will actually render.

FallbackWrap the sweep in prefers-reduced-motion. A looping shimmer is exactly the kind of endless movement that setting exists to stop.

.line {
  background: linear-gradient(90deg,
    #1a212d 25%, #26303f 50%, #1a212d 75%)
    0 0 / 300% 100%;
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep {
  to { background-position: -300% 0; }
}

Published 12 Aug 2026