Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to Create Wave Loader using CSS?

  • Last Updated : 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.

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>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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :