How to Create Wave Loader using CSS? - GeeksforGeeks

17 Jul, 2020
A Wave Loader can be used in websites when something is loading it will provide better user experience, The wave loader can be easily created using HTML and CSS.
HTML Code: In this section, we will create a basic div tag which consists of various 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>Wave Loader</title></head><body>  <div>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>  </div></body></html>
CSS Code: In this section, we will first design the span element using some basic CSS properties, then we will use the nth-child() Selector to select every span element i.e the nth child and then we will create the loading animation using @keyframes rule.
<style> *{   margin: 0;   padding: 0;  }    div{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    display: flex;    align-items: center;  }  span{    height: 30px;    width: 7px;    margin-right: 10px;    background-color: green;    animation: loading 1s linear infinite;  }  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;  }// @keyframes for animation  @keyframes loading {    0%{      height: 0;    }    25%{      height: 25px;    }    50%{      height: 50px;    }    100%{      height: 0;    }        }  </style>
Final 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>Wave Loader</title></head><style>  *{    margin: 0;    padding: 0;   }      div{     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%);     display: flex;     align-items: center;   }   span{     height: 30px;     width: 7px;     margin-right: 10px;     background-color: green;     animation: loading 1s linear infinite;   }   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;   }      @keyframes loading {     0%{       height: 0;     }     25%{       height: 25px;     }     50%{       height: 50px;     }     100%{       height: 0;     }          }    </style><body>  <div>    <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.
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
Making a div vertically scrollable using CSS
How to set fixed width for <td> in a table ?
How to set div width to fit content 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)