505
CSS ring loader animation using HTML and CSS
In this blog post, I will show you how to create a CSS ring loader animation using HTML and CSS. A ring loader is a circular spinner that indicates that something is loading or processing. It is a common UI element that can enhance the user experience of your website or app.
A ring loader is a type of loading indicator that shows a circular spinner moving around it. It is used to inform the user that something is happening in the background, such as fetching data, loading content, or processing information. A ring loader can improve the user interface of your website or app by adding some interactivity and feedback.
To create a CSS ring loader, we will use two HTML elements: a div with the class “container” and class “ring”.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ring loader</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
</div>
</body>
</html>CSS
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.container{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .ring{
position: relative;
width: 150px;
height: 150px;
margin: -15px;
border-radius: 50%;
border: 4px solid #24ecff;
border-top: 4px solid #24ecff;
animation: animate 4s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.container .ring::before{
content: '';
position: absolute;
width: 15px;
height: 15px;
top: 12px;
right: 12px;
border-radius: 50%;
background: #24ecff;
box-shadow: 0 0 0 5px #24ecff33,
0 0 0 10px #24ecff22,
0 0 0 20px #24ecff11,
0 0 20px #24ecff,
0 0 50px #24ecff;
}
.container .ring:nth-child(2){
animation: animate2 4s linear infinite;
animation-delay: -1s;
border-right: 4px solid #93ff2d;
border-bottom: 4px solid #93ff2d;
border-top: 4px solid #93ff2d;
border-left: 4px solid #93ff2d;
}
.container .ring:nth-child(2)::before{
content: '';
position: absolute;
top: initial;
bottom: 12px;
left: 12px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #93ff2d;
box-shadow: 0 0 0 5px #93ff2d33,
0 0 0 10px #93ff2d22,
0 0 0 20px #93ff2d11,
0 0 20px #93ff2d,
0 0 50px #93ff2d;
}
@keyframes animate2 {
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
.container .ring:nth-child(3){
animation: animate2 4s linear infinite;
animation-delay: -3s;
position: absolute;
top: -66.66px;
border-right: 4px solid #5f88d9;
border-bottom: 4px solid #5f88d9;
border-top: 4px solid #5f88d9;
border-left: 4px solid #5f88d9;
}
.container .ring:nth-child(3)::before{
content: '';
position: absolute;
top: initial;
bottom: 12px;
left: 12px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #e41cf8;
box-shadow: 0 0 0 5px #e41cf833,
0 0 0 10px #e41cf822,
0 0 0 20px #e41cf811,
0 0 20px #e41cf8,
0 0 50px #e41cf8;
}
.container .ring:nth-child(4){
animation: animate2 4s linear infinite;
animation-delay: -1s;
position: absolute;
top: 66.66px;
border-right: 4px solid #5fd9bb;
border-bottom: 4px solid #5fd9bb;
border-top: 4px solid #5fd9bb;
border-left: 4px solid #5fd9bb;
}
.container .ring:nth-child(4)::before{
content: '';
position: absolute;
top: initial;
bottom: 12px;
left: 12px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #d489db;
box-shadow: 0 0 0 5px #da91e133,
0 0 0 10px #9e63a422,
0 0 0 20px #e41cf811,
0 0 20px #ba8ebe,
0 0 50px #a879ad;
