How to create Animated bars using HTML and CSS?

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.

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.

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

Output: