Checkerboard Flip Loader: Pure CSS Loading Animation

Checkerboard Flip Loader

A four by four checkerboard whose tiles flip over in a diagonal wave, swapping solid and pale squares, then flip back. Two-sided tiles use backface-visibility on a pair of pseudo-elements.

Also known as: flipping tiles loader, tile flip grid, checkerboard loader.

Color Size 64px Dark background

HTML

<div class="ldr-checkerboard-flip" role="status" aria-label="Loading">
  <span style="--d: 0; --p: 0"></span><span style="--d: 1; --p: 1"></span><span style="--d: 2; --p: 0"></span><span style="--d: 3; --p: 1"></span>
  <span style="--d: 1; --p: 1"></span><span style="--d: 2; --p: 0"></span><span style="--d: 3; --p: 1"></span><span style="--d: 4; --p: 0"></span>
  <span style="--d: 2; --p: 0"></span><span style="--d: 3; --p: 1"></span><span style="--d: 4; --p: 0"></span><span style="--d: 5; --p: 1"></span>
  <span style="--d: 3; --p: 1"></span><span style="--d: 4; --p: 0"></span><span style="--d: 5; --p: 1"></span><span style="--d: 6; --p: 0"></span>
</div>

CSS

.ldr-checkerboard-flip {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--s) / 24);
  width: var(--s);
  height: var(--s);
}
.ldr-checkerboard-flip span {
  position: relative;
  transform-style: preserve-3d;
  animation: ldr-checkerboard-flip-turn 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
  animation-delay: calc(var(--d) * 0.08s);
}
.ldr-checkerboard-flip span::before,
.ldr-checkerboard-flip span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) / 40);
  backface-visibility: hidden;
}
.ldr-checkerboard-flip span::before {
  background: var(--c);
}
.ldr-checkerboard-flip span::after {
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
  transform: rotateY(180deg);
}
@keyframes ldr-checkerboard-flip-turn {
  0%, 12%   { transform: perspective(calc(var(--s) * 2)) rotate3d(1, -1, 0, calc(var(--p) * 180deg)); }
  42%, 62%  { transform: perspective(calc(var(--s) * 2)) rotate3d(1, -1, 0, calc(var(--p) * 180deg + 180deg)); }
  92%, 100% { transform: perspective(calc(var(--s) * 2)) rotate3d(1, -1, 0, calc(var(--p) * 180deg + 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-checkerboard-flip, .ldr-checkerboard-flip *, .ldr-checkerboard-flip::before, .ldr-checkerboard-flip::after, .ldr-checkerboard-flip *::before, .ldr-checkerboard-flip *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Checkerboard Flip Loader

HTML

CSS

Customizing this loader

Similar loaders