How to create Animated bars using HTML and CSS?

Last Updated : 05 Aug, 2020

Dancing bars are one of the classical components that are used in making a good looking website. They are very simple to implement and can be used as a loader or an animation while recording sound.

Approach: The approach is to use unordered list to create bars and then animate them using keyframes. You should have knowledge of keyframes and n-th child property of CSS before going any further in this article.

HTML Code: In this section, we have created an unordered list.

html

<!DOCTYPE html>
<html>
<head>
<title>Dancing Bars</title>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

CSS Code: For CSS, follow the these steps:

Step 1: Align ul to the center of the page.
Step 2: Remove all styling of the list and apply some width and height to make bar like shape.
Step 3: Use keyframes to animate bars along the Y-axis. Increase the scale on final frame to do so.
Step 4: Use n-th child property to apply .1s delay between each li element.

Tip: You can also make the same design in horizontal view by using scaleX and keeping the list in their default arrangement.

html

ul{
      position: absolute;
      top:50%;
      left:50%;
      display: flex;
    }
    ul li{
      list-style: none;
      width: 6px;
      height: 20px;
      background: #262626;
      margin: 0 4px;
      animation: animate .7s infinite alternate 
      }
      @keyframes animate {
        0%{
          transform: scaleY(1);
        }
         25%{
          transform: scaleY(1);
        }
         50%{
          transform: scaleY(1);
        }
         75%{
          transform: scaleY(1);
        }
         100%{
          transform: scaleY(3);
        }
        
      }
      ul li:nth-child(1){
        animation-delay: .1s;
      }
      
      ul li:nth-child(2){
        animation-delay: .2s;
      }
      
      ul li:nth-child(3){
        animation-delay: .3s;
      }
      
      ul li:nth-child(4){
        animation-delay: .4s;
      }
      
      ul li:nth-child(5){
        animation-delay: .5s;
      }
      
      ul li:nth-child(6){
        animation-delay: .6s;
      }

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