How to create an animated bar chart using HTML and CSS?

Overview

Animation bar is a graphic animation bar created using HTML and CSS. The layout of the animated bar is created using HTML, and the bar's styling is made using CSS. A normal bar chart can be created normally, but we have to create an animated bar chart, so we will use the CSS transition animation property to animate it. We will build an animation bar that is identical to the music animation bar synchronizer.

algorithm

Step 1 - Create an HTML file in a text editor and add the HTML boilerplate in it.

Step 2 − Now create a parent div container that contains the animated lines.

<div class="animatedLines"></div>

Step 3 − Create a div sub-container within the parent div. Create at least seven "divs" to make a good animated bar and add the class names as lines into them.

<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 the file to the HTML document.

<link rel="stylesheet" href="style.css">

Step 5− Set the style of the HTML element 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 − Animate these lines by positioning 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 animation bar has been successfully created.

Example

In this example, we create an animated bar. To do this, we create two files: index.html and style.css. The index file contains the layout of the page, and the style.css file contains the style portion of the page.

   
   <link rel="stylesheet" href="style.css">
   


   
tutorialspoint.com
   

      

      

      

      

      

      

      

      

   

The given image below shows the output of the above example, it shows some animated lines that you can see live on the browser. When a user loads this feature into their browser, it displays an animated line that looks more attractive.

in conclusion

This feature of the animation bar can be used as a graphical interface in the speech synthesizer. You can also see this component in many applications such as audio recorders and dj beat synchronizers. The main part of the example above is the timing, we set the timing to animate as the bar size increases.

The above is the detailed content of How to create an animated bar chart using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!