← Back to gallery
CSS

Shimmer Skeleton Loaders

A project-authored CSS skeleton loader showcase that groups gradient sweeps, background-position slides, and keyframe cadence variants in one pattern.

shimmerskeleton-loaderplaceholderlinear-gradientbackground-positionanimationkeyframes

Pattern group

Shimmer skeleton loader variants

A moving linear-gradient sheen passes across stable skeleton blocks.

Shimmer / skeleton / linear-gradient / placeholder

Shimmer gradient sweep skeleton

Reimplements loading placeholders with authored CSS blocks and a moving linear-gradient sheen so skeleton cards feel responsive without importing any external asset.

daybreak feed shimmer active — 2.3s linear sweep

Wide card skeleton + gentle sheen

Daybreak Feed

Daybreak Feed uses broad blocks and a soft highlight band so list placeholders feel calm while content is still streaming in.

A 106-degree sweep crosses muted slate blocks with a pale cyan center band and wider low-contrast falloff on both sides.

  • feed rows
  • broad highlight
  • calm loading

Dense telemetry rows + sharper band

Signal Console

Signal Console narrows the highlight so compact metric placeholders feel brisk and directional instead of foggy.

A 121-degree sheen uses a brighter center slice with shorter soft edges so the reflective lane feels quicker and more technical.

  • dense UI
  • technical sheen
  • telemetry cards

Avatar stack + lifted diagonal glow

Frost Profile

Frost Profile tips the sweep further so profile cards and side rails get a taller diagonal shimmer across portrait and text blocks together.

A 132-degree shimmer leans into a cooler silver-blue band, using longer tails so the diagonal reads across stacked avatar and copy blocks.

  • profile rail
  • avatar + copy
  • cool diagonal

Gradient inspector

Daybreak Feed

Gradient logic
106deg sweep with 0.42 highlight alpha
Motion map
2.3s linear sweep

The sweep stays low-contrast and roomy, which keeps repeated cards from flickering too hard when several placeholders appear together on a dashboard or news feed.

css
.shimmer-skeleton {
  --shimmer-angle: 106deg;
  --shimmer-duration: 2.3s;
  --shimmer-highlight: rgba(166, 233, 255, 0.42);
  --shimmer-soft: rgba(91, 146, 176, 0.18);
  position: relative;
  overflow: hidden;
}

.shimmer-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    var(--shimmer-angle),
    transparent 24%,
    var(--shimmer-soft) 38%,
    var(--shimmer-highlight) 50%,
    var(--shimmer-soft) 62%,
    transparent 76%
  );
  background-size: 220% 100%;
  animation: shimmerSweep var(--shimmer-duration) linear infinite;
}

@keyframes shimmerSweep {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}