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 🙂