20 CSS Loaders 03 / 20

CSS Skeleton Screen Loader

Three shimmer-based CSS skeleton screens — a profile card, an article card, and a dashboard widget — using a single shared shimmer keyframe scoped per wrapper.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="ld-03">
  <div class="ld-03__stage">
    <!-- Profile card -->
    <div class="ld-03__card">
      <div class="ld-03__meta">
        <div class="ld-03__skel ld-03__avatar"></div>
        <div class="ld-03__lines">
          <div class="ld-03__skel ld-03__line"></div>
          <div class="ld-03__skel ld-03__line ld-03__line--short"></div>
        </div>
.ld-03,.ld-03 *,.ld-03 *::before,.ld-03 *::after{box-sizing:border-box;margin:0;padding:0}
.ld-03{
  --bg:#111827;--card:#1f2937;--shine:rgba(255,255,255,.06);--line:#374151;
  background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',sans-serif;padding:40px;
}
.ld-03__stage{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:900px;width:100%}

.ld-03__card{background:var(--card);border-radius:16px;padding:20px;overflow:hidden}
.ld-03__skel{background:var(--line);border-radius:8px;position:relative;overflow:hidden}
.ld-03__skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--shine) 50%,transparent 100%);animation:ld-03-shimmer 1.5s ease-in-out infinite;transform:translateX(-100%)}
@keyframes ld-03-shimmer{to{transform:translateX(100%)}}

/* Profile card skeleton */
.ld-03__avatar{width:56px;height:56px;border-radius:50%}
.ld-03__meta{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ld-03__lines{flex:1;display:flex;flex-direction:column;gap:8px}
.ld-03__line{height:10px}
.ld-03__line--short{width:60%}
.ld-03__image-skel{height:140px;border-radius:10px;margin-bottom:16px}
.ld-03__text-block{display:flex;flex-direction:column;gap:8px}

/* Article skeleton */
.ld-03__article-img{height:160px;border-radius:10px;margin-bottom:16px}
.ld-03__tag{height:20px;width:60px;border-radius:20px;margin-bottom:12px}
.ld-03__title-line{height:14px;margin-bottom:8px}
.ld-03__title-line--half{width:55%}
.ld-03__para-line{height:10px;margin-bottom:6px}
.ld-03__para-line--short{width:70%}

/* Dashboard skeleton */
.ld-03__stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.ld-03__stat{background:var(--bg);border-radius:10px;padding:14px}
.ld-03__stat-num{height:28px;width:50%;margin-bottom:8px;border-radius:6px}
.ld-03__stat-lbl{height:10px;width:80%;border-radius:4px}
.ld-03__chart{height:100px;border-radius:10px}

@media(prefers-reduced-motion:reduce){.ld-03__skel::after{animation:none}}

How this works

The shimmer effect is a single ::after pseudo-element on each .ld-03__skel bone, absolutely positioned and animated with translateX(-100%) → translateX(100%). The pseudo-element carries a linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) that sweeps left-to-right, simulating a light reflection. Using ::after rather than a wrapper div means the HTML stays clean and the shimmer is entirely CSS-driven.

Bone shapes are controlled purely by border-radius, width, and height utility classes like .ld-03__line--short at width:60%. The avatar uses border-radius:50%. All bones share the same @keyframes ld-03-shimmer name but each fires independently since animation-duration and delay are inherited per element, keeping the shimmer cascade natural.

Customize

  • Adjust shimmer brightness by changing the middle stop of the gradient from rgba(255,255,255,.06) to .12 for light themes or .03 for very dark UIs.
  • Speed up or slow the shimmer by editing animation-duration on .ld-03__skel::after — 1s feels snappy; 2.5s is calmer for long-form content.
  • Add a animation-delay stagger per card to make cards shimmer sequentially rather than simultaneously, improving perceived loading hierarchy.
  • Change bone colour from --line: #374151 to match your brand's neutral palette — keep contrast ratio above 2:1 against the card background for visibility.
  • Replace ::after shimmer with a background-position animation on a wider linear-gradient background for broader browser compat without pseudo-elements.

Watch out for

  • The overflow:hidden on each .ld-03__skel element is required to clip the shimmer; removing it causes the gradient to bleed outside the bone shape.
  • Adding border-radius to a bone and a ::after shimmer requires the parent to have position:relative — missing this causes the shimmer to overflow the card entirely.
  • If you animate the shimmer with background-size instead of translateX, Safari < 16 may not interpolate correctly and shows a static gradient.

Browser support

ChromeSafariFirefoxEdge
49+ 9+ 44+ 49+

The translateX shimmer technique has universal support; no modern CSS features required.

More from 20 CSS Loaders

CSS Typing Dots LoaderCSS Staircase Step LoaderCSS Infinity Loop LoaderCSS Gradient Conic SpinnerCSS Particle Burst LoaderCSS Spinning Ring LoaderCSS Dot Chase LoaderCSS Progress Bar LoaderCSS Bouncing Balls LoaderCSS DNA Helix LoaderCSS Glitch Flicker LoaderCSS Heartbeat Pulse Loader
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →