You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewDiagonal Shimmer Skeleton — 45° Sweep Loading Placeholder
Diagonal Shimmer Skeleton · Loaders · Plain HTML & CSS · Live preview
What's included
Features
About this UI Snippet
Diagonal Shimmer Skeleton — One Continuous 45° Light Band, Not a Per-Block Sweep
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.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML and CSS into an AI coding assistant like Claude and ask it to explain precisely why one oversized, 45°-angled sweep element with mix-blend-mode: overlay produces a different visual result than giving each placeholder block its own independent shimmer gradient — specifically why the diagonal geometry makes elements at different positions brighten at slightly different instants rather than in perfect unison. It's worth asking about the sizing choice too: why the sweep is inset -60% and sized to 220% rather than exactly matching the card, and what visual artifact would appear at the animation's edges without that overshoot. For extending it, ask for a version where the sweep's angle and speed are CSS custom properties so a design system can tune the "light direction" per brand, a variant that triggers the sweep once on demand instead of looping, or a check on how the effect reads over a light theme versus this dark one. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a skeleton loading placeholder whose shimmer travels diagonally across the whole card as one continuous band, in plain HTML and CSS only — no JavaScript, and no per-element gradient like a standard horizontal shimmer.
Requirements:
- A card containing several differently-shaped placeholder blocks (a circular avatar, a few text-line bars of varying widths, and a larger rectangular media block), each styled with a single flat background color and absolutely no animation or gradient of its own.
- A single additional element, positioned absolutely to cover the entire card and sized noticeably larger than the card itself (overshooting on every edge), containing a linear-gradient angled at 45 degrees with a narrow bright band in the middle fading to transparent on both sides.
- Animate that one sweep element purely via a CSS transform (translating it diagonally, not animating background-position), looping continuously, so it travels from one corner of the oversized box to the other and its edges never visibly clip inside the card during the animation.
- Apply a blend mode to the sweep element (such as overlay) so it visibly lightens whatever placeholder color is beneath it as it crosses, rather than opaquely covering the shapes — the same band must correctly brighten the circular avatar, the rectangular media block, and the thin text lines despite their different shapes and sizes.
- Because the band is diagonal and covers the whole card as one element, confirm that elements positioned at different points on the card are crossed by the light band at correspondingly different moments as it travels, producing a raking, diagonal light effect rather than every block flashing brighter in perfect synchrony.
- Add a prefers-reduced-motion media query that disables the sweep's animation and reduces its resting opacity, so the card still reads clearly as a loading placeholder for users who have that preference set.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSA profile-style card renders with avatar, media, and text placeholders.
- 2Watch the diagonal bandOne light sweep travels top-left to bottom-right across every shape at once.
- 3Compare the angleNotice the band crosses each block at a different moment, unlike a synced horizontal shimmer.
- 4Add or remove blocksAny .ds-block you add is automatically covered by the same sweep — no per-block setup.
- 5Tune the bandAdjust the gradient stops, width, and animation duration for a tighter or softer sweep.
- 6Respect motion prefsIt already dims and disables the animation under prefers-reduced-motion.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The standard skeleton loader gives each placeholder its own oversized horizontal gradient and animates background-position independently per element, so every shape shimmers on its own strip. This snippet uses one diagonal band, tilted 45° and animated via transform across the whole card, so every shape brightens together along a single traveling edge instead of shimmering separately.
The sweep element's gradient itself is angled at 45deg, and the element is translated along both the x and y axes in its keyframe. Because it crosses shapes at different vertical positions at different horizontal offsets, elements higher and further left brighten slightly before elements lower and further right — the diagonal geometry, not a scripted delay, produces the raking-light effect.
mix-blend-mode: overlay lightens the colour beneath it rather than covering it, so the same white gradient band reads correctly whether it's crossing a dark avatar circle or a slightly different-toned media block. A flat semi-transparent overlay would look identical everywhere and wash out the underlying shapes instead of appearing to reflect light off them.
The sweep is inset -60% on every side and sized to 220%, so its full travel range stays within that oversized box. Since the animation only translates it a modest distance, the gradient's soft edges never have to enter or exit the visible card boundary mid-animation, which would otherwise create a visible hard edge or pop.
Render the card with its placeholder blocks and the single .ds-sweep element as a sibling positioned last (so it paints on top), and toggle the whole card out for real content once your data loads. The CSS is entirely self-contained — no JavaScript drives the animation — so it ports unchanged into any framework's markup.