javascript - Circle progress bar keeps looping -

i have circle progress script found here: http://www.jqueryscript.net/demo/animated-circular-progress-bar-with-jquery-canvas-circle-progress/

i added website, thing have these element around middle of page (not in view when page loads). intention show animation once user scrolls down position, effect keeps looping on every scroll. how can make run once when element gets on view , prevent looping and/or restart?

here's code far: http://jsfiddle.net/1f58u1o5/1/

css

.progressbar {     display: inline-block;     width: 100px;     margin: 25px; }  .circle {     width: 100%;     margin: 0 auto;     margin-top: 10px;     display: inline-block;     position: relative;     text-align: center; }  .circle canvas { vertical-align: middle; }  .circle div {     position: absolute;     top: 30px;     left: 0;     width: 100%;     text-align: center;     line-height: 40px;     font-size: 20px; }  .circle strong {     font-style: normal;     font-size: 0.6em;     font-weight: normal; }  .circle span {     display: block;     color: #aaa;     margin-top: 12px; } 

html

<div style="width:100%;height:500px;"></div> <h3>sed scelerisque</h3> <div class="progressbar">     <div class="circle" data-percent="98"><div></div><p>quisque's</p></div> </div> <div class="progressbar">     <div class="circle" data-percent="30"><div></div><p>maecenas</p></div> </div> <div class="progressbar">     <div class="circle" data-percent="77"><div></div><p>pellentesque</p></div> </div> <div class="progressbar">     <div class="circle" data-percent="49"><div></div><p>etiam sodales</p></div> </div> <div style="width:100%;height:500px;"></div> 

javascript

$(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 percentage  = parseint(percent, 10) / parseint(100, 10);             if(elementpos<topofwindow+$(window).height()-30){                 $(this).find('.circle').circleprogress({                     startangle: -math.pi / 2,                     value: percentage,                     thickness: 14,                     fill: { color: '#1b58b8' }                 }).on('circle-animation-progress', function(event,progress,stepvalue) {                     $(this).find('div').text(string(stepvalue.tofixed(2)).substr(2) + '%');                 }).stop();             }         });     }      // show animated elements     animateelements();     $(window).scroll(animateelements); }); 

any suggestions? thank much.

this jsfiddle: http://jsfiddle.net/edward_lee/1f58u1o5/2/

add data attribute on <div class="progressbar"> check animation played or not. initial value false because animation not played yet.

<div class="progressbar" data-animate="false">

add attribute false condition on if statement if(elementpos<topofwindow+$(window).height()-30 && !animate).

once animation played, set attribute true.

$('.progressbar').each(function(){     var elementpos  = $(this).offset().top;     var topofwindow = $(window).scrolltop();     var percent     = $(this).find('.circle').attr('data-percent');     var percentage  = parseint(percent, 10) / parseint(100, 10);     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: percentage,             thickness: 14,             fill: { color: '#1b58b8' }         }).on('circle-animation-progress', function(event,progress,stepvalue) {             $(this).find('div').text(string(stepvalue.tofixed(2)).substr(2) + '%');         }).stop();     } });