How to create Animated bars using HTML and CSS? (original) (raw)

Last Updated : 5 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 `

`

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.

html `

`

Output: