Design Atlas
한국어
↝ Motion

Shimmer

시머

A band of light sweeping diagonally across a skeleton placeholder to signal "still loading."

Also known as: Skeleton shimmerLoading shine
···
html
<div class="card">
  <div class="line w1"></div>
  <div class="line w2"></div>
  <div class="line w3"></div>
</div>
css
.card{width:78%;display:grid;gap:10px}
.line{height:14px;border-radius:7px;background:var(--line);position:relative;overflow:hidden}
.w1{width:70%}.w2{width:100%}.w3{width:45%}
.line::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--fg) 18%,transparent) 50%,transparent 70%);
  background-size:200% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{0%{background-position:150% 0}100%{background-position:-150% 0}}

Lay a gradient (transparent → bright → transparent) over a grey block as a background-image and animate background-position. Make background-size much wider than the element itself so the light band eases in and out smoothly.

It reads as "something is actively happening" better than a flat pulsing skeleton, which improves perceived performance regardless of actual load time.

When to use

Use it only when the actual load genuinely takes over a second. Adding a skeleton to content that loads instantly makes it look slower, not faster.