Diagonal Shimmer Skeleton — 45° Sweep Loading Placeholder

The familiar skeleton loader shimmer works by giving every placeholder its own oversized horizontal gradient and animating background-position independently on each element — every block shimmers, but each on its own strip, left to right. This snippet builds a genuinely different mechanic: a single diagonal light band, tilted 45°, that travels across the entire card as one element — so an avatar circle, a media block, and several text lines all brighten together along one continuous diagonal edge, the way light glances off a card under a raking light source, rather than each shape shimmering independently.

One sweep element, not many gradients

Every placeholder (.ds-block) is flat — a plain background colour, no gradient, no animation of its own. All of the shimmer lives in a single .ds-sweep element absolutely positioned to overshoot the card on every side (-60% inset, 220% size) so it can slide fully across without its edges ever entering the visible area. This is the structural difference from a standard skeleton: the light source is external to the placeholders, not baked into each one.

Why 45° instead of 0°

The sweep's gradient runs at linear-gradient(45deg, …), and the whole element is translated diagonally via transform: translate() in its keyframe rather than the horizontal background-position trick a standard shimmer uses. Because the band is tilted, it crosses the avatar circle, the media block, and each text line at a slightly different moment depending on their position — exactly like a beam of light raking across a physical surface — rather than a synchronized flat sweep where every element brightens at the same x-coordinate simultaneously.

mix-blend-mode does the brightening

The sweep uses mix-blend-mode: overlay so its white gradient band lightens whatever placeholder colour sits beneath it, rather than covering it opaquely. This means the sweep can sit as one element on top of every block at once — a card, an avatar, and lines of different widths — and each still reads as "the same colour, momentarily brighter," which is what keeps the illusion coherent across shapes of very different sizes.

A transform animation, not background-position

Because the sweep is one large element rather than per-block gradients, animating it with transform: translate() (GPU-composited, no layout or paint cost) is both simpler and cheaper than the standard approach's own background-position trick — one element animates instead of five or six.

Reduced motion and reuse

A prefers-reduced-motion query disables the sweep's animation and lowers its resting opacity so it still reads as "a placeholder" without motion. Compose any combination of .ds-block shapes — the sweep automatically covers whatever the card contains, so it's a drop-in alternative anywhere you'd otherwise reach for the standard skeleton loader or skeleton card grid.