Rolling Square Loader: Pure CSS Loading Animation

Rolling Square Loader

A square tips over its corner and rolls along a short floor, two rolls out and two rolls back. The pivot is transform-origin on a corner; a stepped parent resets the roll so the loop never slides.

Also known as: tipping square loader, rolling box animation, flipping block loader.

Color Size 64px Dark background

HTML

<div class="ldr-rolling-square" role="status" aria-label="Loading"><span></span></div>

CSS

.ldr-rolling-square {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --w: calc(var(--s) * 0.42);
  position: relative;
  width: calc(var(--w) * 3);
  height: var(--s);
}
.ldr-rolling-square::before {
  content: "";
  position: absolute;
  left: calc(var(--s) * -0.04);
  right: calc(var(--s) * -0.04);
  bottom: calc(var(--s) * 0.12);
  height: calc(var(--s) / 20);
  border-radius: calc(var(--s) / 40);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 20%, transparent);
}
.ldr-rolling-square span {
  position: absolute;
  left: 0;
  bottom: calc(var(--s) * 0.17);
  width: var(--w);
  height: var(--w);
  animation: ldr-rolling-square-step 2.4s step-end infinite;
}
.ldr-rolling-square span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) / 30);
  background: var(--c);
  animation: ldr-rolling-square-roll 2.4s infinite;
}
@keyframes ldr-rolling-square-step {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(var(--w)); }
  50%  { transform: translateX(calc(var(--w) * 2)); }
  75%  { transform: translateX(var(--w)); }
  100% { transform: translateX(0); }
}
@keyframes ldr-rolling-square-roll {
  0%   { transform: rotate(0deg); transform-origin: 100% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  19%  { transform: rotate(90deg); transform-origin: 100% 100%; animation-timing-function: step-end; }
  25%  { transform: rotate(0deg); transform-origin: 100% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  44%  { transform: rotate(90deg); transform-origin: 100% 100%; animation-timing-function: step-end; }
  50%  { transform: rotate(0deg); transform-origin: 0% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  69%  { transform: rotate(-90deg); transform-origin: 0% 100%; animation-timing-function: step-end; }
  75%  { transform: rotate(0deg); transform-origin: 0% 100%; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.9); }
  94%  { transform: rotate(-90deg); transform-origin: 0% 100%; animation-timing-function: step-end; }
  100% { transform: rotate(0deg); transform-origin: 0% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-rolling-square, .ldr-rolling-square *, .ldr-rolling-square::before, .ldr-rolling-square::after, .ldr-rolling-square *::before, .ldr-rolling-square *::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.

Rolling Square Loader

HTML

CSS

Customizing this loader

Similar loaders