<div class="wrap">
  <h1>Animated Bar Graphs</h1>
<div class="holder"><div class="bar cf" data-percent="85%"><span class="label">Photoshop</span></div><div class="bar cf" data-percent="75%"><span class="label light">Illustrator</span></div><div class="bar cf" data-percent="65%"><span class="label">Indesign</span></div><div class="bar cf" data-percent="90%"><span class="label light">HTML</span></div><div class="bar cf" data-percent="90%"><span class="label">CSS</span></div><div class="bar cf" data-percent="80%"><span class="label light">jQuery</span></div><div class="bar cf" data-percent="85%"><span class="label light">RWD</span></div><div class="bar cf" data-percent="75%"><span class="label">PHP</span></div><div class="bar cf" data-percent="80%"><span class="label light">WordPress</span></div><div class="bar cf" data-percent="70%"><span class="label">SASS/SCSS</span></div></div>
  </div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:400,700);
@import "compass/reset";
$fontSans : 'Montserrat', sans-serif;
 

$red : #e74c3c ;
$redAL : rgba(231, 76, 60, 0.95);
$dark :  #3d3d3d;


@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}
*{ box-sizing:border-box;}



body {
  color: #333;
  -webkit-font-smoothing: antialiased;
  font-family: $fontSans;
  padding: 2%;
 
}
.wrap {
  width: 50%;
  margin: 0 auto;
}
h1 {
  font-family: $fontSans;
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  padding: .5em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #dadada;
  letter-spacing: 3px;
  text-transform: uppercase;
}
ul {
  li {
      line-height: 2;
      font-weight: bold;
      font-family:$fontSans;
      font-size: .85em;text-transform: uppercase;
      clear: both;
    // border-bottom: 1px solid $border;
    &:before {
      content: "\2023";
      padding: 0 1em 0 0;
    }
  }
 }
 .bar {
  background:$red;
  width: 0;
  margin: .25em 0;
  color: #fff;
  position: relative;
   transition:width 2s, background .2s;
   -webkit-transform: translate3d(0,0,0);
   clear: both;
   &:nth-of-type(2n) {
    background:lighten($red , 10% );
   }
   .label {
    font-size: .75em;
    padding: 1em;
    background: $dark;
    width: 8em;
    display: inline-block;
    position: relative;
    z-index: 2;
    font-weight: bold;
    font-family: $fontSans;
     &.light {
    background:lighten($dark , 10% );
   }

}
 }
 .count {
  position: absolute;
  right: .25em;
  top: .75em;
  padding: .15em; 
  font-size: .75em;
  font-weight: bold;
  font-family: $fontSans;
 }

setTimeout(function start (){
  
  $('.bar').each(function(i){  
    var $bar = $(this);
    $(this).append('<span class="count"></span>')
    setTimeout(function(){
      $bar.css('width', $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)