A loading placeholder in CSS

A gray block that shimmers, sized like the thing that has not arrived yet.

.skeleton {
  border-radius: 0.375rem;
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%,
                              #eef2f7 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

.skeleton.line { block-size: 0.75rem; margin-block: 0.4rem; }
.skeleton.title { block-size: 1.25rem; inline-size: 60%; }

@keyframes shimmer {
  to { background-position: -135% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #eef2f7; }
}

How it works

1. A moving gradient is one background-position animation.
2. aria-hidden in the markup keeps the shimmer out of the reading order.
3. Honour prefers-reduced-motion: a still block is still a placeholder.

Keywords and builtins used here

• animation
• background
• deg
• keyframes
• line
• media
• rem
• s
• skeleton
• title

The run, in numbers

Lines

18

Characters to type

460

Tokens

111

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 74 seconds.

Type this snippet

Step 3 of 3 in Text & scrollers, step 9 of 13 in Styling components.

← Previous Next →