Não entendi direito o objetivo final da pergunta, existem duas interpretações do que necessita **1)** - Gostaria que fosse uma barra de progresso pro conteúdo da pagina? Se for isso mesmo: Podes usar `window.addEventListener('scroll', function() {` pegando o tamanho da tela do usuário (`var height = document.body.getBoundingClientRect().height - window.innerHeight;`) com a posição atual da tela (`var top = window.scrollY;`) para ir recalculando a porcentagem atual e recarregando o script `$('.circle').circleProgress({` com o valor da porcentagem. Função adaptada desta outra: [progress-bar-when-scroll][1] <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function updateProgress(num1, num2) { var percent = Math.ceil(num1 / num2 * 100); $('.circle').circleProgress({ value: percent / 100, animation: false, fill: {color: '#0000ff'} }) } window.addEventListener('scroll', function() { var top = window.scrollY; var height = document.body.getBoundingClientRect().height - window.innerHeight; updateProgress(top, height); }); <!-- language: lang-css --> .circle { margin: 6px 6px 20px; display: inline-block; position: relative; text-align: center; line-height: 1.2; } .circle strong { position: absolute; top: 51px; left: 0; width: 100%; text-align: center; line-height: 60px; } .circle strong i { font-style: normal; font-size: 1.4em; font-weight: 300; } .fixo { position: fixed!important; top: 0; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script> <div id="skills" class="container content center-align skill-progress"> <div class="fixo"> <div class="circle"> <strong></strong> </div> </div> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div> <!-- end snippet --> --- **2)** - Gostaria que a animação iniciasse assim que chegar no elemento? Pode fazer algo parecido: Ao iniciar a pagina chamar a função `$('.circle').circleProgress({` com `value: 0`, criar uma função que calcule qual a distancia do elemento levando em consideração a atual visualização da tela: $(window).scroll(function() { var $circle = $(".circle"); var window_offset = $circle.offset().top - $(window).scrollTop(); }); E dentro desta função chamar outra função que se "alto destrua" quando ultrapassar um certo limite estipulado: var myFunction = function(window_offset) { if (window_offset < 100) { myFunction = function() {}; Dentro desse limite estipulado ainda chamar novamente a função `$('.circle').circleProgress({` com o valor da porcentagem que você gostaria. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $('.circle').circleProgress({ value: 0, fill: { color: '#0000ff' } }) var myFunction = function(window_offset) { if (window_offset < 100) { myFunction = function() {}; $('.circle').circleProgress({ value: 0.85, fill: { color: '#0000ff' } }) } return 1; }; $(window).scroll(function() { var $circle = $(".circle"); var window_offset = $circle.offset().top - $(window).scrollTop(); $("#window_offset").html(window_offset); myFunction(window_offset); }); <!-- language: lang-css --> .circle { margin: 6px 6px 20px; display: inline-block; position: relative; text-align: center; line-height: 1.2; } .circle strong { position: absolute; top: 51px; left: 0; width: 100%; text-align: center; line-height: 60px; } .circle strong i { font-style: normal; font-size: 1.4em; font-weight: 300; } .fixo { position: fixed!important; top: 0px; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script> <div id="skills" class="container content center-align skill-progress"> <br/> <br/> <label class="fixo" id="window_offset"></label> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <div class="circle"> <strong></strong> </div> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div> <!-- end snippet --> [1]: http://stackoverflow.com/questions/31594698/progress-bar-when-scroll