Kreis Progress Bar nicht bei gewünschten Prozentsatz

Question

Ich bin eine kreisförmige Fortschrittsbalken für mein Projekt erstellen.

Desired Progress Circle

Ich habe folgende in html CSS und jQuery getan, aber das Problem ist, ich bin nicht immer, wie es in einem gewünschten Prozentsatz zu stoppen. Es wird immer zu 100% abgeschlossen. Ich möchte es an einem bestimmten Punkt stoppen.

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>

Bitte helfen Sie mir aus ihm heraus.

Answer 1

Aktualisiert Ihren Code und jetzt habe ich die Variable stopPercent auf 50 gesetzt. Das Laden wird also unter 50% gestoppt. Ist das was du brauchst?

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>