Animated Loading Spinner with Moving Squares Using Pure CSS

Creating an animated loading spinner is a great way to enhance user experience while a webpage or process is loading. This design uses five squares that move in a sequence, forming a smooth and engaging animation. The best part? It’s built entirely with HTML and CSS — no JavaScript required.

Layout Overview

The structure starts with a wrapper container that holds five small square elements. These squares are absolutely positioned inside the container, and their placement is controlled using CSS variables for consistency and flexibility.

Each square is given a dark orange color and a slight border radius to soften the edges. Their size and spacing are controlled using custom CSS variables, making it easy to adjust the overall design with just a few changes.

Animation Behavior

The animation involves five squares moving in a specific pattern that mimics a wave or flowing motion from left to right and back. Each square follows its own keyframe path and timing, but together they create a continuous, looping animation.

At the beginning of the animation, each square fades in smoothly with a slight scale effect. This fade-in is staggered so that the squares don’t all appear at once, which adds polish to the visual experience.

Timing and Movement

The entire animation is powered by CSS keyframes. Each square follows a different path:

• The first square starts in the top-left corner and moves down.

• The second and third squares move around the middle and bottom area.

• The fourth square moves toward the far right.

• The fifth square wraps the motion back toward the start.

As each square moves, it appears to follow a sequence where it shifts one step forward in a smooth transition. The use of a shared animation duration and delay values ensures all movements are well-coordinated.

Styling Details

All squares are styled consistently but follow different animation rules. The ease-in-out and ease-out timing functions ensure that the motion starts and ends smoothly, preventing any jarring effects.

The layout is centered within its container using margin auto, and there’s spacing added on the top and bottom to separate it from other page elements.

Custom properties like --square, --offset, and --duration make this design flexible. You can quickly scale the animation up or down by changing a single value, making it adaptable for different screen sizes or design styles.

Final Result

The finished spinner is a dynamic, looping sequence of five squares that shift and animate in harmony. It’s clean, smooth, and visually engaging — perfect for indicating loading states in modern web applications.

Since it uses no images or scripts, it loads instantly and works well across all modern browsers. It’s a lightweight solution that adds visual interest without sacrificing performance.