3.5K
CSS Glowing Circle Loading Animation
We can create awesome animations for web applications without using JavaScript. CSS works like JavaScript and from time to time coming to its different frameworks, so developers like to use CSS. In this tutorial, I am going to create CSS Glowing Circle Loading Animation
CSS Glowing Circle Loading Animation
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS Glowing Circle Loading Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
</div>
</body>
</html>
CSS
body
{
margin: 0;
padding: 0;
background: #000;
}
.loader
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
box-sizing: border-box;
}
.loader:before
{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0%;
height: 0%;
border-radius: 50%;
box-sizing: border-box;
animation: animate 2s linear infinite;
}
.loader:after
{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
border-radius: 50%;
box-sizing: border-box;
animation: animate 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate
{
0%
{
width: 0;
height: 0;
border: 4px solid #00e250;
box-shadow: 0 0 10px #00e250;
opacity: 1;
}
70%
{
opacity: 1;
}
100%
{
width: 100%;
height: 100%;
border: 4px solid #00e250;
box-shadow: 0 0 100px #00e250;
opacity: 0;
}
}
For More Tutorials Please Click Here
