jQuery Appear + Animate

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="maha-progress-bar">
  <span class="r-value">10</span>
  <span class="r-caption">Value of Benefit</span>
  <div class="bar-wrap">
    <span class="bar accent-color" data-width="100" style="width:0%;">
													</span>
  </div>
</div>

<br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="maha-progress-bar">
  <span class="r-value">9</span>
  <span class="r-caption">Usability</span>
  <div class="bar-wrap">
    <span class="bar accent-color" data-width="90" style="width:0%;">
													</span>
  </div>
</div>



<div class="maha-progress-bar">
  <span class="r-value">8</span>
  <span class="r-caption">Design</span>
  <div class="bar-wrap">
    <span class="bar accent-color" data-width="80" style="width:0%;">
													</span>
  </div>
</div>



<div class="maha-progress-bar">
  <span class="r-value">10</span>
  <span class="r-caption">Reuse Value</span>
  <div class="bar-wrap">
    <span class="bar accent-color" data-width="100" style="width:0%;">
													</span>
  </div>
</div>

CSS

body {
  color: #595858;
  -webkit-font-smoothing: antialiased;
}

.maha-progress-bar .bar {
  height: 9px;
  width: 0px;
  display: block;
  background-color: #333333;
}

.maha-progress-bar .bar,
.dropcap.square,
.dropcap.circle {
  background-color: #333333;
}

.maha-progress-bar span {
  overflow: visible !important;
  position: relative;
}

.maha-progress-bar .bar-wrap {
  margin-bottom: 13px;
  background-color: #ebebeb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
}

.maha-progress-bar span.r-value {
  float: right;
}

JavaScript

jQuery(document).ready(function($) {


  $('.maha-progress-bar').each(function(i) {

    $(this).appear(function() {

      var percent = $(this).find('.bar').attr('data-width');
      var $that = $(this);

      $(this).find('.bar').animate({
        'width': percent + '%'
      }, 1600, 'easeOutCirc');

      //100% progress bar 
      if (percent == '100') {
        $that.find('.bar').addClass('full');
      }

    });

  });

});


// Appear
! function(e) {
  e.fn.appear = function(a, r) {
    var n = e.extend({
      data: void 0,
      one: !0,
      accX: 0,
      accY: 0
    }, r);
    return this.each(function() {
      var r = e(this);
      if (r.appeared = !1, !a) return void r.trigger("appear", n.data);
      var p = e(window),
        t = function() {
          if (!r.is(":visible")) return void(r.appeared = !1);
          var e = p.scrollLeft(),
            a = p.scrollTop(),
            t = r.offset(),
            c = t.left,
            i = t.top,
            o = n.accX,
            f = n.accY,
            s = r.height(),
            u = p.height(),
            d = r.width(),
            l = p.width();
          i + s + f >= a && a + u + f >= i && c + d + o >= e && e + l + o >= c ? r.appeared || r.trigger("appear", n.data) : r.appeared = !1
        },
        c = function() {
          if (r.appeared = !0, n.one) {
            p.unbind("scroll", t);
            var c = e.inArray(t, e.fn.appear.checks);
            c >= 0 && e.fn.appear.checks.splice(c, 1)
          }
          a.apply(this, arguments)
        };
      n.one ? r.one("appear", n.data, c) : r.bind("appear", n.data, c), p.scroll(t), e.fn.appear.checks.push(t), t()
    })
  }, e.extend(e.fn.appear, {
    checks: [],
    timeout: null,
    checkAll: function() {
      var a = e.fn.appear.checks.length;
      if (a > 0)
        for (; a--;) e.fn.appear.checks[a]()
    },
    run: function() {
      e.fn.appear.timeout && clearTimeout(e.fn.appear.timeout), e.fn.appear.timeout =...