Open In App

How to Create Wave Loader using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 17 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads