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.
<!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.
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.
<!DOCTYPE html> < html > < head > < title >Dancing Bars</ title > < style > 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; } </ style > </ head > < body > < ul > < li ></ li > < li ></ li > < li ></ li > < li ></ li > < li ></ li > < li ></ li > </ ul > </ body > </ html > |
Output:
Contact Us