I have a progress bar script, I would like the progress bar fill animation to start as soon as the user scrolls the page to the animated elements.
I tried to use $('.progress-bar').scroll(function() { etc...
, but every time I use the mouse scroll, it restarts script execution.
I would like the script to run only once.
$('.skill-progress').each(function() {
$('.html-css.circle').circleProgress({
value: 0.87,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#EC6630', .5], ['#0096E6', .5]], gradientAngle: Math.PI / 5
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #EC6630;">HTML</span> / <span style="color: #0096E6;">CSS</span></i>');
});
$('.jq-js.circle').circleProgress({
value: 0.63,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#1169AE', .5], ['#EEAF4B', .5]], gradientAngle: Math.PI / 1.8
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #1169AE;">JQ</span> / <span style="color: #EEAF4B;">JS</span></i>');
});
$('.php-mysql.circle').circleProgress({
value: 0.47,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#8993BE', .5], ['#F88500', .5]], gradientAngle: Math.PI / 1.5
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #8993BE;">PHP</span> / <span style="color: #F88500;">MYSQL</span></i>');
});
$('.ps-cd.circle').circleProgress({
value: 0.53,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#5889C4', .5], ['#55A746', .5]], gradientAngle: Math.PI / 2
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #5889C4;">PS</span> / <span style="color: #55A746;">CDR</span></i>');
});
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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="html-css circle">
<strong></strong>
</div>
<div class="jq-js circle">
<strong></strong>
</div>
<div class="php-mysql circle">
<strong></strong>
</div>
<div class="ps-cd circle">
<strong></strong>
</div>
</div>