Let’s create a simple Dots Ring Loader using HTML and CSS. This loader will consist of animated dots forming a ring, providing a visually appealing loading indicator for websites or applications.
We’ll keep it minimalistic yet dynamic, using HTML to structure the loader and CSS to style and animate the dots.
Let’s get started by crafting the Dots Ring Loader. Whether you’re a beginner or an experienced developer, this project offers a straightforward introduction to creating loaders with HTML and CSS.
Let’s make the loading experience more engaging with a stylish dots ring animation!
HTML :
This HTML code creates a webpage with a loader animation consisting of dots and a ring. It links to an external CSS file for styling. The loader animation is represented by <div> elements with specific class names.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Dots & Ring Loader - CSS</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <input type="checkbox"/> <div class="bg"></div> <div class="dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="ring"></div> </div> <!-- partial --> </body> </html>
CSS :
This CSS code sets up the styling for a loader animation. It defines colors, durations, and animations for dots and a ring. The animation includes rotating dots, expanding dots, and changing the stacking order of the ring.
:root {
--w: #fafafa;
--b: #141414;
--s: 1s;
--d: calc(var(--s) / 6);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
input {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 4;
opacity: 0;
cursor: pointer;
}
input:checked ~ div {
filter: invert(1);
}
input:checked + .bg:before {
content: "CLICK FOR DARK";
}
.bg:before {
content: "CLICK FOR LIGHT";
position: absolute;
color: var(--w);
width: 100%;
text-align: center;
bottom: 10vh;
font-family: Arial, Helvetica, serif;
font-size: 12px;
text-shadow: 0 0 1px var(--w);
opacity: 0.25;
}
body, .dots {
display: flex;
align-items: center;
justify-content: center;
}
.bg {
width: 100vw;
height: 100vh;
position: absolute;
background: var(--b);
z-index: -2;
}
.dots {
width: 50vmin;
height: 50vmin;
position: relative;
}
.ring {
border: 1.5vmin solid var(--w);
width: 64%;
height: 64%;
border-radius: 100%;
z-index: 0;
box-shadow: 0 0 0 1vmin var(--b), 0 0 0 1vmin var(--b) inset;
}
.dot {
width: 50%;
position: absolute;
height: 7vmin;
left: 0;
transform-origin: 100% 50%;
z-index: -1;
animation: over-ring calc(var(--s) * 2) linear 0s infinite, spin calc(var(--s) * 8) linear 0s infinite;
}
.dot:before {
content: "";
width: 5.5vmin;
height: 5.5vmin;
left: 0;
box-sizing: border-box;
border: 1vmin solid var(--b);
position: absolute;
background: var(--w);
border-radius: 100%;
animation: ball var(--s) ease-in-out 0s infinite alternate;
}
.dot:nth-child(1) {
animation-delay: calc(var(--d) * 0), calc(var(--d) * 0);
}
.dot:nth-child(1):before {
animation-delay: calc(var(--d) * 0);
}
.dot:nth-child(2) {
animation-delay: calc(var(--d) * -1), calc(var(--d) * -4);
}
.dot:nth-child(2):before {
animation-delay: calc(var(--d) * -1);
}
.dot:nth-child(3) {
animation-delay: calc(var(--d) * -2), calc(var(--d) * -8);
}
.dot:nth-child(3):before {
animation-delay: calc(var(--d) * -2);
}
.dot:nth-child(4) {
animation-delay: calc(var(--d) * -3), calc(var(--d) * -12);
}
.dot:nth-child(4):before {
animation-delay: calc(var(--d) * -3);
}
.dot:nth-child(5) {
animation-delay: calc(var(--d) * -4), calc(var(--d) * -16);
}
.dot:nth-child(5):before {
animation-delay: calc(var(--d) * -4);
}
.dot:nth-child(6) {
animation-delay: calc(var(--d) * -5), calc(var(--d) * -20);
}
.dot:nth-child(6):before {
animation-delay: calc(var(--d) * -5);
}
.dot:nth-child(7) {
animation-delay: calc(var(--d) * -6), calc(var(--d) * -24);
}
.dot:nth-child(7):before {
animation-delay: calc(var(--d) * -6);
}
.dot:nth-child(8) {
animation-delay: calc(var(--d) * -7), calc(var(--d) * -28);
}
.dot:nth-child(8):before {
animation-delay: calc(var(--d) * -7);
}
.dot:nth-child(9) {
animation-delay: calc(var(--d) * -8), calc(var(--d) * -32);
}
.dot:nth-child(9):before {
animation-delay: calc(var(--d) * -8);
}
.dot:nth-child(10) {
animation-delay: calc(var(--d) * -9), calc(var(--d) * -36);
}
.dot:nth-child(10):before {
animation-delay: calc(var(--d) * -9);
}
.dot:nth-child(11) {
animation-delay: calc(var(--d) * -10), calc(var(--d) * -40);
}
.dot:nth-child(11):before {
animation-delay: calc(var(--d) * -10);
}
.dot:nth-child(12) {
animation-delay: calc(var(--d) * -11), calc(var(--d) * -44);
}
.dot:nth-child(12):before {
animation-delay: calc(var(--d) * -11);
}
@keyframes spin {
100% {
transform: rotate(-360deg);
}
}
@keyframes ball {
100% {
left: 12vmin;
width: 4vmin;
height: 4vmin;
}
}
@keyframes over-ring {
0%, 50% {
z-index: -1;
}
51%, 100% {
z-index: 1;
}
}
In short, crafting a Dots Ring Loader using HTML and CSS has been a quick and effective way to create a visually appealing loading animation. By combining HTML for structure and CSS for styling and animation, we’ve achieved a dynamic loading indicator for websites or applications.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
