LOADERS

Square Flip Loader

A compact loader with a square that flips smoothly between two sides. It uses pure HTML and CSS with no JavaScript required.

HTML
<div class="square-flip-loader" aria-label="Loading"></div>
CSS
.square-flip-loader{
  width:52px;
  height:52px;
  border-radius:8px;
  background:linear-gradient(
    135deg,
    #22d3ee,
    #8b5cf6
  );

  box-shadow:
    0 0 24px rgba(34,211,238,.2);

  animation:squareFlip 1.4s ease-in-out infinite;
}

@keyframes squareFlip{
  0%{
    transform:perspective(120px) rotateX(0) rotateY(0);
  }

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

  100%{
    transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}

How This Square Flip Loader Works

The Square Flip Loader is a CSS-only loading indicator made from a single <div> element. Its visual style comes from a gradient background, rounded corners, a soft glow, and a repeating 3D flip animation. There is no JavaScript in this component, so the loader begins animating automatically as soon as its CSS is applied.

The .square-flip-loader element is 52px wide and 52px high, giving it an equal-sided square shape. A border-radius of 8px slightly rounds the corners without turning the element into a circle. This keeps the loader clearly recognizable as a square while softening its edges.

The background uses a linear-gradient() set at 135deg. It transitions from cyan #22d3ee to purple #8b5cf6, creating a diagonal color change across the square. Since the gradient is part of the element itself, it rotates together with the square during the flip animation.

A subtle glow is added with box-shadow: 0 0 24px rgba(34,211,238,.2). The shadow has no horizontal or vertical offset, so it spreads evenly around the loader. Its cyan color matches the first gradient color, while the .2 alpha value keeps the glow fairly soft.

The flipping effect is created by the squareFlip keyframes. The animation lasts 1.4s, uses ease-in-out, and repeats infinitely. The easing causes the rotation to accelerate and decelerate during each stage rather than moving at a constant speed.

At the beginning of the animation, the transform is perspective(120px) rotateX(0) rotateY(0). The perspective(120px) function gives the following rotations a 3D appearance. Without perspective, the rotations would still occur, but the depth effect would look much flatter.

At the 50% keyframe, the square uses rotateX(-180deg) while rotateY(0) remains unchanged. This means the first half of the animation flips the loader completely around its horizontal axis.

During the second half, the X-axis rotation stays at -180deg, while the Y-axis rotation changes from 0 to -180deg. By the 100% keyframe, the square has therefore completed one half-turn on both the X and Y axes.

This two-stage rotation is what gives the loader its distinctive flipping pattern. Instead of simply spinning around one axis, it first folds vertically through the X rotation and then flips sideways through the Y rotation. For more detail about properties and functions used for effects like these, see the MDN CSS transform documentation.

The HTML also includes aria-label="Loading" on the loader element. This provides a short accessible description even though no visible loading text is displayed.

Customizing the Square Flip Loader

The component has only a few visual and animation values, so its appearance can be changed without altering the HTML structure.

  • Change the 52px width and height to make the loader larger or smaller.
  • Adjust the 8px border radius to create sharper or more rounded corners.
  • Replace #22d3ee and #8b5cf6 to use a different two-color gradient.
  • Change the gradient angle from 135deg to alter the direction of the color transition.
  • Adjust the 24px shadow blur to make the cyan glow tighter or more spread out.
  • Change the .2 shadow opacity to make the glow weaker or stronger.
  • Modify the 1.4s animation duration to speed up or slow down the flipping cycle.
  • Adjust perspective(120px) if you want the 3D depth effect to appear stronger or flatter.

Where to Use the Square Flip Loader

This loader works well in interfaces where you need a compact indefinite loading state without displaying an exact completion percentage.

  • Dashboard cards while content or statistics are being loaded.
  • Form submission states during background processing.
  • Modal windows that are waiting for remote content.
  • Page sections that load independently from the rest of the interface.
  • Buttons or controls that need a temporary loading indicator.
  • Dark or colorful UI designs where a cyan-to-purple gradient fits the surrounding style.

For another CSS-only loader that also uses a flipping-style motion, the Hourglass Loader is a related CodeRipple component worth checking. The Square Flip Loader is particularly useful when you want a geometric loader with visible 3D motion but do not need JavaScript or progress-tracking logic.

Frequently Asked Questions

Does the Square Flip Loader use JavaScript?

No. The component contains no JavaScript. Its gradient, glow, perspective, and flipping movement are all handled through CSS.

How does the loader create a 3D effect?

The transform includes perspective(120px) before the X and Y rotations. This perspective changes how the rotating square is projected, making the flips appear to have depth.

Why does the loader rotate on two different axes?

The first half of the animation rotates the square 180 degrees on the X axis. The second half keeps that rotation and adds a 180-degree Y-axis rotation, producing the two-stage flip.

Can I make the loader flip faster?

Yes. Reduce the current 1.4s animation duration to make each cycle complete more quickly. Increasing the duration will slow the flipping motion.

The Square Flip Loader keeps its implementation compact by combining one element, a diagonal gradient, a soft shadow, and a two-axis transform animation to create a clear CSS-only loading state.

Scroll to Top