Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create a Dot loading Animation using HTML and CSS?

  • Last Updated : 14 Aug, 2020

The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS.

HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some span tags inside of it.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,
                 initial-scale=1.0">
  <title>Dots Loading Animation</title>
</head>
<style>
    
<body>
  <div class="loader">
    <span></span>
    <span ></span>
    <span ></span>
    <span ></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

CSS Code: In this section first we will create the dots structure using some basic CSS properties and then in order to create the animation we will use @keyframes rule and use the transformX() function to produce the desired effect.




<style>
body{
  margin: 0;
  padding: 0;
 }
  
 .loader{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
     
 }
 /* Creating the dots */
 span{
   height: 25px;
   width: 25px;
   margin-right: 10px;
   border-radius: 50%;
   background-color: green;
   animation: loading 1s linear infinite;
 }
 /* Creating the loading animation*/
 @keyframes loading {
   0%{
    transform: translateX(0);
   }
   25%{
    transform: translateX(15px);
   }
   50%{
    transform: translateX(-15px);
   }
   100%{
    transform: translateX(0);
   }
     
 }
  
span:nth-child(1){
  animation-delay: 0.1s;
}
span:nth-child(2){
  animation-delay: 0.2s;
}
span:nth-child(3){
  animation-delay: 0.3s;
}
span:nth-child(4){
  animation-delay: 0.4s;
}
span:nth-child(5){
  animation-delay: 0.5s;
}
</style>

Complete Code:  It is the combination of the above two code sections.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width,
                 initial-scale=1.0">
  <title>Dots loading animation</title>
</head>
<style>
  body{
  margin: 0;
  padding: 0;
 }
  
 .loader{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
     
 }
 /* Creating the dots */
 span{
   height: 25px;
   width: 25px;
   margin-right: 10px;
   border-radius: 50%;
   background-color: green;
   animation: loading 1s linear infinite;
 }
 /* Creating the loading animation*/
 @keyframes loading {
   0%{
    transform: translateX(0);
   }
   25%{
    transform: translateX(15px);
   }
   50%{
    transform: translateX(-15px);
   }
   100%{
    transform: translateX(0);
   }
     
 }
span:nth-child(1){
  animation-delay: 0.1s;
}
span:nth-child(2){
  animation-delay: 0.2s;
}
span:nth-child(3){
  animation-delay: 0.3s;
}
span:nth-child(4){
  animation-delay: 0.4s;
}
span:nth-child(5){
  animation-delay: 0.5s;
}
</style
<body>
  <div class="loader">
    <span></span>
    <span ></span>
    <span ></span>
    <span ></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

Output: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :