CSS Loading Dots.Today in this blog , we gonna learn about CSS Loading Dots for Beginners.
CSS Loading Dots
Hi Friends!
Today in this blog, we gonna learn about CSS Loading Dots for Beginners. Button Border Animations, Button Neon Effects, and Button Hover Effects are one of the best attractive and clickable parts of the website. I already uploaded some loader effects if you're a beginner let's go and learn it.
These Loading Dots is nice to see on websites. In the previous blog, we will learn about CSS Creative Glowing Loader if you're a beginner I will recommend learning that loader effect first. If you're learning that and this blog will help you to learn about Loading Dots. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css loading dots</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with the extension .HTML . This extension is more important to create a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
span{
display: block;
height: 30px;
width: 30px;
margin: 5px;
background-color: dodgerblue;
border-radius: 50%;
animation: loader 2s linear infinite;
}
span:nth-child(1){
animation-delay: 0.2s;
}
span:nth-child(2){
animation-delay: 0.4s;
}
span:nth-child(3){
animation-delay: 0.6s;
}
span:nth-child(4){
animation-delay: 0.8s;
}
span:nth-child(5){
animation-delay: 1s;
}
span:nth-child(6){
animation-delay: 1.2s;
}
@keyframes loader{
50%{
height: 50px;
width: 50px;
filter: hue-rotate(360deg) drop-shadow(1px 10px);
box-shadow: 1px 1px 40px dodgerblue;
}
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called .CSS . This will help you to design your webpage. If you want more clear in this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn the all loader effects to develop your CSS skills. repeat the code for your practice this will help you to learn these Loading Dots effectively and This video is also helpful to learn faster. colourful Loading Dots Effects are one of my favourite CSS effects. I hope this tutorial will be helpful for learning the button effect for beginners. I will give you Source Code and you can download it.
COMMENTS