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

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.
<!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: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)