Hello friends, as you know I have been creating a lot of JavaScript Projects, that’s why today I will create a Loader using HTML and CSS. I am sure you will love this loading animation.
Let’s have look at the given image of our program [Create a Loader in HTML & CSS], there are a total of 15 dots and they rotate at 360 deg with brighter and dimmer colors.
I have added smooth and beautiful animation. I highly recommend you to watch the real demo of this website loading animation or preloader. You will also get the idea, how all HTML and CSS codes work perfectly in this loading animation.
Animated Loader in HTML & CSS | Video Tutorial
You will get all the HTML and CSS code that I have used to create this loader or Preloader, before jumping into the source code, you need some important points to build this loading animation.
As you have seen on the video tutorial of creating loader or preloader for the website. All dots are blinking with different time intervals, which looks like they all are rotating at 360 deg. Also, you have seen, how I have created this beautiful loading animation using HTML and CSS.
I hope now you can create this type of loading animation easily, if you are feeling difficulty, don’t worry I have provided all the HTML & CSS source code below.
You Might Like This:
Loader or Pre-loader [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Website Loading Animation | CodingLab </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="dots">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
</div>
</section>
</body>
</html>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
background: #4070f4;
}
section .dots span{
position: absolute;
height: 10px;
width: 10px;
background: #fff;
border-radius: 50%;
transform: rotate(calc(var(--i) * (360deg / 15))) translateY(35px);
animation: animate 1.5s linear infinite;
animation-delay: calc(var(--i) * 0.1s);
opacity: 0;
}
@keyframes animate {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
