Dairesel İlerleme Çubuğu İstenen oranda durmuyor

Question

Projem için dairesel bir ilerleme çubuğu oluşturuyorum.

Desired Progress Circle

ben html css ve jquery aşağıdaki yapmış ancak sorun i istenilen yüzdede nasıl durdurulacağını almıyorum olduğunu. Her zaman% 100'e tamamlar. Belirli bir noktada durdurmak istiyorum.

HTML/CSS JS

function setProgress(elem, percent) { 
 
    var 
 
     degrees = percent * 3.6, 
 
     transform = /MSIE 9/.test(navigator.userAgent) ? 'msTransform' : 'transform'; 
 
    elem.querySelector('.counter').setAttribute('data-percent', Math.round(percent)); 
 
    elem.querySelector('.progressEnd').style[transform] = 'rotate(' + degrees + 'deg)'; 
 
    elem.querySelector('.progress').style[transform] = 'rotate(' + degrees + 'deg)'; 
 
    if (percent >= 50 && !/(^|\s)fiftyPlus(\s|$)/.test(elem.className)) 
 
     elem.className += ' fiftyPlus'; 
 
} 
 

 
(function() { 
 
    var 
 
     elem = document.querySelector('.circlePercent'), 
 
     percent = 0; 
 
    (function animate() { 
 
     setProgress(elem, (percent += .25)); 
 
     if (percent < 100) 
 
      setTimeout(animate, 15); 
 
    })(); 
 
})();

.circlePercent { 
 
    position: relative; 
 
    top: 26px; 
 
    left: 26px; 
 
    width: 96px; 
 
    height: 96px; 
 
    border-radius: 50%; 
 
    background: orange; 
 
} 
 
.circlePercent:before, 
 
.circlePercent > .progressEnd { 
 
    position: absolute; 
 
    z-index: 3; 
 
    top: 2px; 
 
    left: 45px; 
 
    width: 6px; 
 
    height: 6px; 
 
    border-radius: 50%; 
 
    background: white; 
 
    -ms-transform-origin: 3px 46px; 
 
    transform-origin: 3px 46px; 
 
    content: ""; 
 
} 
 
.circlePercent:after, 
 
.circlePercent > .progress { 
 
    position: absolute; 
 
    -ms-transform-origin: 48px 48px; 
 
    transform-origin: 48px 48px; 
 
    z-index: 0; 
 
    top: 0; 
 
    left: 0; 
 
    width: 48px; 
 
    height: 96px; 
 
    border-radius: 48px 0 0 48px; 
 
    background: orange; 
 
    content: ""; 
 
} 
 
.circlePercent.fiftyPlus:after { 
 
    background: white; 
 
    -ms-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.circlePercent > .progress.progress { 
 
    background: white; 
 
} 
 
.circlePercent > .counter { 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    z-index: 2; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top: -2px; 
 
    margin-left: -2px; 
 
    border-radius: 50%; 
 
    border: 4px solid orange; 
 
} 
 
.circlePercent > .counter:before { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 50%; 
 
    margin-top: -13px; 
 
    width: 100%; 
 
    height: 26px; 
 
    font-size: 26px; 
 
    line-height: 26px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    color: white; 
 
    content: attr(data-percent) "%"; 
 
} 
 
.circlePercent > .counter:after { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    top: 6px; 
 
    left: 6px; 
 
    border-radius: 50%; 
 
    background: orange; 
 
    content: ""; 
 
} 
 
.circlePercent > .counter[data-percent="100"] { 
 
    background: white; 
 
}

<div class="circlePercent"> 
 
      <div class="counter" data-percent="0"></div> 
 
      <div class="progress"></div> 
 
      <div class="progressEnd"></div> 
 
     </div> 
 
     <script src="scripts/radialloader.js"></script>

Lütfen bunun dışında bana yardım et.

Answer 1

Kodunuzu güncelledik ve şimdi stopPercent değişkenini 50 olarak ayarladık. Yani yükleme 50%'da durdurulacak. Senin ihtiyacın olan şey bu mu?

function setProgress(elem, percent) { 
 
    var 
 
     degrees = percent * 3.6, 
 
     transform = /MSIE 9/.test(navigator.userAgent) ? 'msTransform' : 'transform'; 
 
    elem.querySelector('.counter').setAttribute('data-percent', Math.round(percent)); 
 
    elem.querySelector('.progressEnd').style[transform] = 'rotate(' + degrees + 'deg)'; 
 
    elem.querySelector('.progress').style[transform] = 'rotate(' + degrees + 'deg)'; 
 
    if (percent >= 50 && !/(^|\s)fiftyPlus(\s|$)/.test(elem.className)) 
 
     elem.className += ' fiftyPlus'; 
 
} 
 

 
    (function() { 
 
var elem = document.querySelector('.circlePercent'),percent = 0,stopped = false,stopPercent = 50; 
 
(function animate() { 
 
    setProgress(elem, (percent += .25)); 
 
    if (percent < 100 && !stopped) 
 
     setTimeout(animate, 15); 
 
\t \t if(percent == stopPercent){ 
 
\t \t \t stopped = true; 
 
\t \t } 
 
})(); 
 
})();

.circlePercent { 
 
    position: relative; 
 
    top: 26px; 
 
    left: 26px; 
 
    width: 96px; 
 
    height: 96px; 
 
    border-radius: 50%; 
 
    background: orange; 
 
} 
 
.circlePercent:before, 
 
.circlePercent > .progressEnd { 
 
    position: absolute; 
 
    z-index: 3; 
 
    top: 2px; 
 
    left: 45px; 
 
    width: 6px; 
 
    height: 6px; 
 
    border-radius: 50%; 
 
    background: white; 
 
    -ms-transform-origin: 3px 46px; 
 
    transform-origin: 3px 46px; 
 
    content: ""; 
 
} 
 
.circlePercent:after, 
 
.circlePercent > .progress { 
 
    position: absolute; 
 
    -ms-transform-origin: 48px 48px; 
 
    transform-origin: 48px 48px; 
 
    z-index: 0; 
 
    top: 0; 
 
    left: 0; 
 
    width: 48px; 
 
    height: 96px; 
 
    border-radius: 48px 0 0 48px; 
 
    background: orange; 
 
    content: ""; 
 
} 
 
.circlePercent.fiftyPlus:after { 
 
    background: white; 
 
    -ms-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.circlePercent > .progress.progress { 
 
    background: white; 
 
} 
 
.circlePercent > .counter { 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    z-index: 2; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top: -2px; 
 
    margin-left: -2px; 
 
    border-radius: 50%; 
 
    border: 4px solid orange; 
 
} 
 
.circlePercent > .counter:before { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 50%; 
 
    margin-top: -13px; 
 
    width: 100%; 
 
    height: 26px; 
 
    font-size: 26px; 
 
    line-height: 26px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    color: white; 
 
    content: attr(data-percent) "%"; 
 
} 
 
.circlePercent > .counter:after { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    top: 6px; 
 
    left: 6px; 
 
    border-radius: 50%; 
 
    background: orange; 
 
    content: ""; 
 
} 
 
.circlePercent > .counter[data-percent="100"] { 
 
    background: white; 
 
}

<div class="circlePercent"> 
 
      <div class="counter" data-percent="0"></div> 
 
      <div class="progress"></div> 
 
      <div class="progressEnd"></div> 
 
     </div> 
 
     <script src="scripts/radialloader.js"></script>