Vertical Bar Chart Animation CSS

If you’re looking to add an eye-catching vertical bar chart animation to your website, this code is exactly what you need. The code provides a simple and elegant solution for creating animated vertical bar charts using CSS. Each bar represents a specific percentage value and is accompanied by a corresponding year label.

The code utilizes CSS animations to gradually reveal the bars, creating a visually appealing effect. With just a few lines of HTML and CSS, you can customize the chart to fit your data and seamlessly integrate it into your website. Enhance your web design and engage your visitors with this impressive vertical bar chart animation.

How to Create Vertical Bar Chart Animation CSS

1. Create the HTML structure for the bar chart as follows:

<section class="bar-graph bar-graph-vertical bar-graph-two">
  <div class="bar-one bar-container">
    <div class="bar" data-percentage="40%"></div>
    <span class="year">2023</span>
  </div>
  <div class="bar-two bar-container">
    <div class="bar" data-percentage="55%"></div>
    <span class="year">2024</span>
  </div>
  <div class="bar-three bar-container">
    <div class="bar" data-percentage="68%"></div>
    <span class="year">2025</span>
  </div>
  <div class="bar-four bar-container">
    <div class="bar" data-percentage="82%"></div>
    <span class="year">2026</span>
  </div>
</section>

2. Now, style and animate bars using the following CSS code:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 10px 20px;
}

/* Bar Graph Vertical */
.bar-graph .year {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
}

.bar-graph-vertical {
  margin-top: 80px;
  max-width: 680px;
}

.bar-graph-vertical .bar-container {
  float: left;
  height: 150px;
  margin-right: 8px;
  position: relative;
  text-align: center;
  width: 40px;
}

.bar-graph-vertical .bar {
  border-radius: 3px;
  bottom: 40px;
  position: absolute;
  width: 40px;
}

.bar-graph-vertical .year {
  bottom: 0;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bar-graph-two .bar::after {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  color: #fff;
  content: attr(data-percentage);
  font-weight: 700;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: left;
  top: 24px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bar-graph-two .bar-one .bar {
  background-color: #64b2d1;
  -webkit-animation: show-bar-one-vertical 1.2s 0.1s forwards;
  -moz-animation: show-bar-one-vertical 1.2s 0.1s forwards;
  animation: show-bar-one-vertical 1.2s 0.1s forwards;
}

.bar-graph-two .bar-two .bar {
  background-color: #5292ac;
  -webkit-animation: show-bar-two-vertical 1.2s 0.2s forwards;
  -moz-animation: show-bar-two-vertical 1.2s 0.2s forwards;
  animation: show-bar-two-vertical 1.2s 0.2s forwards;
}

.bar-graph-two .bar-three .bar {
  background-color: #407286;
  -webkit-animation: show-bar-three-vertical 1.2s 0.3s forwards;
  -moz-animation: show-bar-three-vertical 1.2s 0.3s forwards;
  animation: show-bar-three-vertical 1.2s 0.3s forwards;
}

.bar-graph-two .bar-four .bar {
  background-color: #2e515f;
  -webkit-animation: show-bar-four-vertical 1.2s 0.4s forwards;
  -moz-animation: show-bar-four-vertical 1.2s 0.4s forwards;
  animation: show-bar-four-vertical 1.2s 0.4s forwards;
}

/* Bar Graph Vertical Animations */
@-webkit-keyframes show-bar-one-vertical {
  0% {
    height: 0;
  }
  100% {
    height: 40%;
  }
}

@-webkit-keyframes show-bar-two-vertical {
  0% {
    height: 0;
  }
  100% {
    height: 55%;
  }
}

@-webkit-keyframes show-bar-three-vertical {
  0% {
    height: 0;
  }
  100% {
    height: 68%;
  }
}

@-webkit-keyframes show-bar-four-vertical {
  0% {
    height: 0;
  }
  100% {
    height: 82%;
  }
}

@-webkit-keyframes fade-in-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

That’s it! hopefully, you have successfully integrated this CSS powered vertical bar chart animation into your project. You can customize the chart to fit your data and integrate it into various web development projects such as business websites, data analysis platforms, educational websites, portfolios, or dashboard panels.