Pure CSS Loaders & patterns #loop #loader

Flipping loader in pure CSS

The classic square loader: half a turn on X, then half a turn on Y.

  • 14 lines of CSS
  • 1 lines of HTML
  • No JavaScript
  • No dependencies
  • MIT licensed
Video 0.8 MB GitHub

How it works

  1. One element, no wrapper: the perspective() function goes inside the transform itself.
  2. It must come first in the transform list, and must be repeated in every keyframe.
  3. Step 1 flips on X, step 2 flips on Y while X stays at −180°.
  4. Use this form when you cannot add a parent just to hold perspective.

Key techniques

  • perspective() inside transform
  • multi-step @keyframes
  • no wrapper needed

HTML 1 lines

<div class="loader"></div>

CSS 14 lines

.loader {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2ee6d6, #8b6cff);
  box-shadow: 0 0 30px rgb(139 108 255 / 0.6);
  animation: flip 1.8s ease-in-out infinite;
}

@keyframes flip {
  0%   { transform: perspective(260px) rotateX(0deg)    rotateY(0deg); }
  50%  { transform: perspective(260px) rotateX(-180deg) rotateY(0deg); }
  100% { transform: perspective(260px) rotateX(-180deg) rotateY(-180deg); }
}

Sass source 23 lines

.d-flipper {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: d-flipper 1.8s ease-in-out infinite;
}

// perspective() INSIDE the transform: a self-contained 3D element, no parent needed.
@keyframes d-flipper {
  0% {
    transform: perspective(240px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(240px) rotateX(-180deg) rotateY(0deg);
  }

  100% {
    transform: perspective(240px) rotateX(-180deg) rotateY(-180deg);
  }
}
Standalone snippet · plain CSS, no build step, no dependencies.

More loaders & patterns

Bookshelf Gyroscope