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.
<!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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...