<script src="http://extranet.wslabs.it/fast/full//js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>


<!-- Counter -->
<section class="counter inner-sm bg-light-grey">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="box-counter">
          <div class="pie" data-percent="25">
            <span class="count">
              50
            </span>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="box-counter">
          <div class="pie" data-percent="50">
            <span class="count">
              115
            </span>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="box-counter">
          <div class="pie" data-percent="92">
            <span class="count">
              250
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /Counter -->

<!-- Scripts -->
<!--[if lt IE 9]>
    <script type="text/javascript" src="http://extranet.wslabs.it/fast/full/js/vendor/jquery-1.11.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]>
     <script type="text/javascript" src="http://extranet.wslabs.it/fast/full/js/vendor/jquery-2.1.1.min.js"></script>
<![endif]-->
<!--[if !IE]> -->
<script type="text/javascript" src="http://extranet.wslabs.it/fast/full/js/vendor/jquery-2.1.1.min.js"></script>
<!-- <![endif]-->
<script src="http://extranet.wslabs.it/fast/js/vendor/jquery.easing-1.3.min.js"></script>
<script src="http://extranet.wslabs.it/fast/full/js/vendor/jquery.easypiechart.min.js"></script>
<!-- /Scripts -->
@import url(http://extranet.wslabs.it/fast/css/bootstrap.min.css);
@import url(http://extranet.wslabs.it/fast/full/css/font-awesome.min.css);
@import url(http://extranet.wslabs.it/fast/full/css/flexslider.css);
@import url(http://extranet.wslabs.it/fast/full/css/main.css);


/*--------------------------------------------------
Counter
--------------------------------------------------*/
.counter .pie { position: relative; z-index: 1; display: block; margin: 0 auto; height: 235px; text-align:center; }
.counter .count { position: absolute; top: 70px; left: 0; z-index: 1; margin: 0; width: 100%; font-size: 50px; line-height: 50px; text-align:center; }

/*--------------------------------------------------
Counter
--------------------------------------------------*/
function counter() {
    if ($('.counter .count').size()) {
        $c = $('.counter .count');

        $c.each(function () {
            var $this = $(this);
            $this.data('target', parseInt($this.html()));
            $this.data('counted', false);
            $this.html('0');
        });

        $(window).bind('scroll', function () {
            var speed = 3000;
            
            $c.each(function (i) {
                var $t = $(this);
                if (!$t.data('counted') && $(window).scrollTop() + $(window).height() >= $t.offset().top) {
                    $t.data('counted', true);
                    
                    $t.animate({
                        dummy: 1
                    }, {
                        duration: speed,
                        step: function (now) {
                            var $this = $(this);
                            var val = Math.round($this.data('target') * now);
                            $this.html(val);
                        },
                        easing: 'easeInOutQuart'
                    });

                    // easy pie
                    $('.pie').easyPieChart({
                        barColor: '#777777',
                        trackColor: '#a7a7a7',
                        scaleColor: false,
                        lineWidth: 10,
                        size: 200,
                        lineCap: 'square',
                        animate: { duration: speed, enabled: true }
                    });
                }
            });
        }).triggerHandler('scroll');
    }
}


/*--------------------------------------------------
DOC READY
--------------------------------------------------*/
$(function () {
    counter();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.