A basic CSS animation known as a “minimal shape rotating loader” involves creating a loader animation using five box shapes that rotate 180 degrees in the appropriate direction, then return to 0 degrees, continuing to loop indefinitely. This post will demonstrate how to use CSS to rotate the loader animation in a square form.
Steps creating HTML/CSS Box Rotating Loader
The shape rotating loader animation will be made using the following method, which is explained below:
- Create a div with the class loader to represent the loader.
- Create four child span elements for the shape—here, we’ll be creating it square-shaped.
- Add an unlimited rotation animation duration and style the box’s width, height, and background color.
- To rotate the boxes 180 degrees, set the keyframes to 50%.
Code:
<!doctype html>
<html lang="en">
<head>
<style>
body{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.loader, .loader span{
width: 10em;
height: 10em;
border: 0.25em solid white;
font-size: 10px;
border-radius: 1em;
position: absolute;
mix-blend-mode: screen;
}
.loader{
background-color: gold;
animation: rotating 2s linear infinite;
}
@keyframes rotating {
to{
transform: rotate(1turn);
}
}
.loader span{
animation: de-rotating 4s linear infinite;
}
@keyframes de-rotating {
from, to{
transform: rotate(0deg) scale(0.5);
}
50%{
transform: rotate(-180deg) scale(1.2);
}
}
.loader span:nth-child(1){
top: 5em;
left: 5em;
background-color: dodgerblue;
}
.loader span:nth-child(2){
top: -5em;
left: 5em;
background-color: hotpink;
}
.loader span:nth-child(3){
top: 5em;
left: -5em;
background-color: mediumpurple;
}
.loader span:nth-child(4){
top: -5em;
left: -5em;
background-color: limegreen;
}
</style>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>