How To Create Rotating Squares Preloader in CSS
The Rotating Squares Preloader creates a smooth animation using four squares, rotating in sequence, to visually represent content loading. Here’s a breakdown of how it works:
1. Preloader Container (.preloader)
The preloader is centered both horizontally and vertically using flexbox. The display: flex, along with justify-content: center and align-items: center, ensures the preloader stays in the middle of the screen, regardless of screen size.
.preloader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f3f3f3;
}height: 100vh: Ensures the container covers the full height of the viewport.background-color: #f3f3f3: Sets a light background color to make the squares stand out.
2. Grid for Squares (.squares)
The four squares are arranged in a 2×2 grid using the CSS Grid Layout.
.squares {
display: grid;
grid-template-columns: repeat(2, 40px);
gap: 10px;
}display: grid: Creates a grid layout.grid-template-columns: repeat(2, 40px): Defines two columns with each square having a width of 40px.gap: 10px: Adds space between the squares.
3. Rotating Square Animation (.square)
Each square rotates smoothly in a continuous loop. All squares share the same animation rule, but the timing is staggered with animation-delay to create a sequential effect.
.square {
width: 40px;
height: 40px;
background-color: #3498db;
animation: rotate 1s infinite ease-in-out;
}widthandheight: Define the size of the square (40×40 pixels).background-color: Sets the color of the squares (#3498dbis a shade of blue).animation: Applies therotatekeyframes over 1 second, repeating infinitely, with a smooth ease-in-out motion.
4. Animation Keyframes (@keyframes rotate)
The keyframes control the rotation of each square, from 0° to 360°. This makes each square appear as if it’s spinning around its center.
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}0%: The square starts at 0° (no rotation).50%: At the halfway point (50%), the square is rotated by 180°.100%: By the end of the animation (100%), the square has completed a full rotation (360°).
5. Sequential Animation
Each square rotates in sequence, thanks to the use of animation-delay:
.square:nth-child(2) {
animation-delay: 0.25s;
}
.square:nth-child(3) {
animation-delay: 0.5s;
}
.square:nth-child(4) {
animation-delay: 0.75s;
}- The first square starts immediately (
0s delay). - The second square starts 0.25 seconds after the first.
- The third square starts 0.5 seconds after the first.
- The fourth square starts 0.75 seconds after the first.
This staggered delay creates a smooth, continuous flow where each square rotates in turn, giving the effect of a rotating pattern.
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Squares Preloader</title>
<style>
body{
margin: 0px;
}
/* Preloader Container */
.preloader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #3498db;
}
/* Rotating Squares */
.squares {
display: grid;
grid-template-columns: repeat(2, 40px);
gap: 10px;
}
.square {
width: 40px;
height: 40px;
background-color: #fff;
animation: rotate 1s infinite ease-in-out;
}
.square:nth-child(2) {
animation-delay: 0.25s;
}
.square:nth-child(3) {
animation-delay: 0.5s;
}
.square:nth-child(4) {
animation-delay: 0.75s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="preloader">
<div class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</body>
</html>
Final Result
The animation gives the impression of movement and fluidity, which is often used in preloaders to suggest that the page is processing data. Each square rotates, but their staggered start times make the effect more dynamic and visually engaging.
