Glowing Dots Loading Animation Using CSS and HTML
GlowingDots.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glowing Dots</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
style.css
*{
margin:0;
padding: 0;
background: #262626;
}
ul{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
display: flex;
margin: 0;
padding: 0;
}
ul li
{
list-style: none;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
animation: ani 1.6s ease-in-out infinite;
}
@keyframes ani {
0%, 40%, 100%
{
transform: scale(0.2);
}
20%
{
transform: scale(0.6);
}
}
ul li:nth-child(1)
{
animation-delay: -1.4s;
background: #ffff00;
box-shadow: 0 0 50px #ffff00;
}
ul li:nth-child(2)
{
animation-delay: -1.2s;
background: #76ff03;
box-shadow: 0 0 50px #76ff03;
}
ul li:nth-child(3)
{
animation-delay: -1s;
background: #f06292;
box-shadow: 0 0 50px #f06292;
}
ul li:nth-child(4)
{
animation-delay: -0.8s;
background: #4fc3f7;
box-shadow: 0 0 50px #4fc3f7;
}
ul li:nth-child(5)
{
animation-delay: -0.6s;
background: #ba68c8;
box-shadow: 0 0 50px #ba68c8;
}
ul li:nth-child(6)
{
animation-delay: -0.4s;
background: #f57c00;
box-shadow: 0 0 50px #f57c00;
}
ul li:nth-child(7)
{
animation-delay: -0.2s;
background: #673ab7;
box-shadow: 0 0 50px #673ab7;
}
Output
(Sorry, for the quality of GIF 😅). Try this code yourself and see the output.
I hope this simple glowing dots animation loader helps you to learn something new. Now click on the download button to download the source code.Download
Happy Coding 🙂
