Animated Bar Graph

by sungsoonz

HTML

<div class="widget graph">
    <div class="bars"> 
      <div class="bar-group">
        <div class="bar fig0" data-percent="85%"></div>
        <div class="bar fig1" data-percent="80%"></div>
      </div>
      <div class="bar-group">
        <div class="bar fig0" data-percent="75%"></div>
        <div class="bar fig1" data-percent="80%"></div>
      </div>
      <div class="bar-group">
        <div class="bar fig0" data-percent="60%"></div>
        <div class="bar fig1" data-percent="80%"></div>
      </div>
      <div class="bar-group">
        <div class="bar fig0" data-percent="50%"></div>
        <div class="bar fig1" data-percent="80%"></div>
      </div>
      <div class="bar-group">
        <div class="bar fig0" data-percent="80%"></div>
        <div class="bar fig1" data-percent="80%"></div>
      </div>
    </div>
    <ul class="x-axis">
     <li class="1">Jan</li>
     <li class="2">Feb</li>
     <li class="3">Mar</li>
     <li class="4">Apr</li>
     <li class="5">May</li>
    </ul>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  padding: 20px;
}
h1 {
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  padding: .5em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #dadada;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget {
  height: 230px;
  position: relative;
}
.bars {
  height: 200px;
  position: absolute;
}
.bar-group {
  float :left;
  height: 100%;
  position: relative;
  width: 80px;
  margin: 0 15px;
}
.bar {
  height: 1%;
  bottom: 0;
  width: 30px;
  position: absolute;
  background: #e74c3c;
  color: #fff;
  transition: all 0.8s ease-out;
  font-size: .75em;
  font-weight: bold;
  z-index: 2;
}
.bar.fig0 {
  left: 0;
}
.bar.fig1 {
  left:40px;
}
.x-axis {
  position: absolute;
  bottom: 0;
}
.x-axis li {
  float: left;
  text-align: center;
  position: relative;
  width: 80px;
  margin: 0 15px;
}


.bar:nth-of-type(2n) {
  background: #ed7669;
}

.count {
  position: absolute;
  right: 4px;
  top: .75em;
  padding: .15em;
  font-size: .75em;
  font-weight: bold;
}

JavaScript

setTimeout(function start() {

  $('.bar').each(function(i) {
    var $bar = $(this);
    $(this).append('<span class="count"></span>')
    setTimeout(function() {
      $bar.css('height', $bar.attr('data-percent'));
    }, i * 100);
  });

  $('.count').each(function() {
    $(this).prop('Counter', 0).animate({
      Counter: $(this).parent('.bar').attr('data-percent')
    }, {
      duration: 2000,
      easing: 'swing',
      step: function(now) {
        $(this).text(Math.ceil(now) + '%');
      }
    });
  });

}, 500)