<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 ----------> <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></h2> <div class="row text-center"> <div class="col-sm-4"> <div class="progressbar"> <div class="second circle" valor="3"> <strong></strong> <span>Satélites<br>Máx: 24</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: 100px !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('valor'); var animate = $(this).data('animate'); if (elementPos < topOfWindow + $(window).height() - 80 && !animate) { $(this).data('animate', true); $(this).find('.circle').circleProgress({ value: percent / 24, size : 200, thickness: 15, fill: { color: '#663399' } }).on('circle-animation-progress', function (event, progress, stepValue) { $(this).find('strong').text((stepValue*24).toFixed(0)); }).stop(); } }); } animateElements(); $(window).scroll(); });