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.
- How to Create Animated Loader Ring using HTML and CSS?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to create animated banner links using HTML and CSS?
- How to create Animated Blur Navbar using CSS?
- HTML & CSS | Tabindex attribute & Navigation bars
- How to Create Animated Background using CSS3 ?
- How to Create Animated Typing Effect using typed.js ?
- Bootstrap 4 | Progress Bars
- Progress Bars in ElectronJS | Set - 2
- Progress Bars in ElectronJS | Set - 1
- jQuery | animated Selector with Example
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to create X and Y axis flip animation using HTML and CSS ?
- How to create Glowing Star effect using HTML and CSS?
- Create a Sticky Social Media Bar using HTML and CSS
- Create a Search Bar using HTML and CSS
- How to create Right Aligned Menu Links using HTML and CSS ?
- How to create a Hero Image using HTML and CSS ?
- How to create a Portfolio Gallery using HTML and CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.