<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Progress Bar</h2> <div class="row text-center"> <div class="col-sm-4"> <div class="progressbar"> <div class="second circle" data-percent="77"> <strong></strong> <span>animation <br> progress</span> </div> </div> </div> <div class="col-sm-4"> <div class="progressbar"> <div class="second circle" data-percent="55"> <strong></strong> <span>animation <br> progress</span> </div> </div> </div> <div class="col-sm-4"> <div class="progressbar"> <div class="second circle" data-percent="100"> <strong></strong> <span>animation <br> progress</span> </div> </div> </div> </div> </div> <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.2/dist/circle-progress.js"></script>

.circle { width: 200px; margin: 6px 6px 20px; display: inline-block; position: relative; text-align: center; line-height: 1.2; } .circle canvas { vertical-align: top; width: 200px !important; } .circle strong { position: absolute; top: 30px; left: 0; width: 100%; text-align: center; line-height: 40px; font-size: 30px; color: black; } .circle strong i { font-style: normal; font-size: 0.6em; font-weight: normal; } .circle span { display: block; color: #aaa; margin-top: 12px; }

$(document).ready(function ($) { function animateElements() { $('.progressbar').each(function () { var elementPos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); var percent = $(this).find('.circle').attr('data-percent'); var animate = $(this).data('animate'); if (elementPos < topOfWindow + $(window).height() - 30 && !animate) { $(this).data('animate', true); $(this).find('.circle').circleProgress({ // startAngle: -Math.PI / 2, value: percent / 100, size : 400, thickness: 15, fill: { color: '#663399' } }).on('circle-animation-progress', function (event, progress, stepValue) { $(this).find('strong').text((stepValue*100).toFixed(0) + "%"); }).stop(); } }); } animateElements(); $(window).scroll(animateElements); });