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
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);
});
.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;
}
<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>
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.
$('.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);
});
.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;
}
<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>