A basic HTML/CSS animation known as a “loading circles” involves creating a loader animation using three circle shapes that rotate 360 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.
Steps creating HTML/CSS Loading Circles
This animation will be made using the following method, which is explained below:
- Create a div with the class loading.
- Create a div with class container inside the loading class div.
- Create three child div elements for the shape. We will be using three circles here.
- Add an unlimited rotation animation duration and style the box’s width, height, and background color.
<!doctype html>
<html lang="en">
<head>
<style>
body{
background-color: #202830;
display: grid;
place-items: center;
margin: 0;
padding: 0;
height: 100vh;
}
.container{
position: relative;
width: 130px;
height: 130px;
border-radius: 100%;
isolation: isolate;
animation: spin 2.5s ease-in-out 0.5s forwards infinite;
}
.ring{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50px;
mix-blend-mode: plus-lighter;
}
.ring-1{
background-color: #f58004;
left: 0;
}
.ring-2{
background-color: #4be053;
left: 50%;
transform: translate(-50%, -50%);
}
.ring-3{
background-color: #44bcf4;
right: 0;
}
@keyframes spin {
0%{
width: 130px;
}
25%{
width: 130px;
transform: rotate(0deg);
}
50%{
width: 50px;
transform: rotate(360deg);
}
75%{
width: 50px;
transform: rotate(0);
}
100%{
width: 130px;
}
}
</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>Loading Circles</title>
</head>
<body>
<div class="loading">
<div class="container">
<div class="ring ring-1"></div>
<div class="ring ring-2"></div>
<div class="ring ring-3"></div>
</div>
</div>
</body>
</html>