Cacher is the code snippet organizer for pro developers

##Circle progress bar setup

###1. Install

bower install jquery-circle-progress
or - https://github.com/kottenator/jquery-circle-progress
download jquery.appear.js - https://github.com/morr/jquery.appear/blob/master/jquery.appear.js

###2. Usage

#####2.1 CONNECT JS TO HTML

<!-- Plugins JavaScript -->
<script src="js/jquery.appear.js"></script>
<script src="js/circle-progress.js"></script>

#####2.1 HTML

<div class="row">
    <div class="col-md-3 col-xs-6 text-center">
        <div class="circle" id="circle-1">
            <strong></strong>
        </div>
    </div>
    <div class="col-md-3 col-xs-6 text-center">
        <div class="circle" id="circle-2">
            <strong></strong>
        </div>
    </div>
    <div class="col-md-3 col-xs-6 text-center">
        <div class="circle" id="circle-3">
            <strong></strong>
        </div>
    </div>
    <div class="col-md-3 col-xs-6 text-center">
        <div class="circle" id="circle-4">
            <strong></strong> 
        </div>
    </div>
</div>
<!-- /.row -->

#####2.3 CSS

.circle strong {
    position: absolute;
    top: 45px;
    left: 0;
    font-weight: 300;
    width: 100%;
    text-align: center;
    font-size: 50px;
    color: @brand-grey-blue;

    i {
        font-style: normal;
        font-size: 0.6em;
        font-weight: normal;
    }
}

#####2.4 JS

// Circle progress bar
var el = $('.circle'),
    inited = false;

el.appear({ force_process: true });

el.on('appear', function() {
    if (!inited) {
        el.circleProgress({
            size: 160,
            startAngle: -Math.PI/2,
            thickness: 16,
        });
        inited = true;
    }
});

$('#circle-1').circleProgress({
    value: 0.9,
    fill: {
        color: "#30bae7"
    }
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(parseInt(90 * progress) + '<i>%</i>');
});

$('#circle-2').circleProgress({
    value: 0.75,
    fill: {
        color: "#d74680"
    }
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(parseInt(75 * progress) + '<i>%</i>');
});

$('#circle-3').circleProgress({
    value: 0.7,
    fill: {
        color: "#15c7a8"
    }
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(parseInt(70 * progress) + '<i>%</i>');
});

$('#circle-4').circleProgress({
    value: 0.85,
    fill: {
        color: "#eb7d4b"
    }
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(parseInt(85 * progress) + '<i>%</i>');
});