Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an Animated bars using HTML and CSS?
Overview
Animated bars are the graphically animated bars which are created using HTML and CSS. The layout of the animated bars are created using HTML and the styling of the bars are made using CSS. The normal bars can be created normally but we have to create the bars with animation so we will be using the CSS transition animation properties to make it animated. We will be building an animated bar same as the music animated bars synchronizer.
Algorithm
Step 1 − Create a HTML file in your text editor and add the HTML boilerplate in it.
Step 2 − Now create a parent div container which contains the animated lines.
<div class="animatedLines"></div>
Step 3 − Create a div child container inside the parent div. Create at least seven ‘div’ to make a good animated bar and add the class name to it as lines.
<div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div> <div class="lines"></div>
Step 4 − Now create a style.css file and link this file to the HTML document.
<link rel="stylesheet" href="style.css">
Step 5 − Style the HTML elements in the style.css file.
.animatedLines {
display: flex;
justify-content: center;
padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {
animation-delay: .1s;
background-color: rgb(141, 255, 88);
}
.animatedLines .lines:nth-child(2) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(3) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(4) {
animation-delay: .4s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(5) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(6) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(7) {
animation-delay: .1s;
background-color: rgb(102, 228, 43);
}
Step 6 − Make an animation of these lines by targeting the class name of the child ‘div’ container..
.animatedLines .lines {
list-style: none;
width: 5px;
height: 10px;
margin: 0 4px;
animation: animatedBars .5s infinite alternate;
}
@keyframes animatedBars {
0% {
transform: scaleY(1);
}
25% {
transform: scaleY(1);
}
50% {
transform: scaleY(1);
}
100% {
transform: scaleY(6);
}
}
Step 7 − The animated bars are created successfully.
Example
In this example we have created an animated bar. So for that we have created two files as index.html and style.css. The index file contains the layout of the page and the style.css file contains the styling portion of the page.
<html>
<head>
<title>animated bars</title>
<link rel="stylesheet" href="style.css">
<style>
.animatedLines {
display: flex;
justify-content: center;
padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {
animation-delay: .1s;
background-color: rgb(141, 255, 88);
}
.animatedLines .lines:nth-child(2) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(3) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(4) {
animation-delay: .4s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(5) {
animation-delay: .3s;
background-color: rgb(18, 49, 6);
}
.animatedLines .lines:nth-child(6) {
animation-delay: .2s;
background-color: rgb(127, 253, 69);
}
.animatedLines .lines:nth-child(7) {
animation-delay: .1s;
background-color: rgb(102, 228, 43);
}
.animatedLines .lines {
list-style: none;
width: 5px;
height: 10px;
margin: 0 4px;
animation: animatedBars .5s infinite alternate;
}
@keyframes animatedBars {
0% {
transform: scaleY(1);
}
25% {
transform: scaleY(1);
}
50% {
transform: scaleY(1);
}
100% {
transform: scaleY(6);
}
}
</style>
</head>
<body>
<h1 style="text-align: center;text-decoration: underline;color: green;">tutorialspoint.com</h1>
<div class="animatedLines">
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
</div>
</body>
</html>
The given image below shows the output of the above example, it shows a few animated lines which you can see on the browser live. When the user loads this feature into the browser it shows an animated lines which looks more attractive.
Conclusion
This feature of the animated bar can be used in voice synthesizer as a graphics interface. You can also see this component in many applications such as voice recorder and dj beats synchronizer. The main part in the above example is timing, we have set the timing of the animation with the increase in the size of the bar.
590 Views
