I successfully created a progress bar using HTML, CSS, and Javascript. It functions perfectly up to a provided value of 100. However, if a value higher than 100 is given, the progress completes but the value continues to change until it reaches the maximum value.
Expectation: I expect the progress to be completed based on the provided value only.
Here is the code I used:
window.addEventListener("load", function
(event){
let circle = document.querySelectorAll('.circle');
console.log(circle);
circle.forEach(function(progress){
let degree = 0;
let percentage=0;
var targetDegree = parseInt(progress.getAttribute('data-degree'));
let color = progress.getAttribute('data-color');
let number = progress.querySelectorAll('.number');
let childNumber = progress.querySelectorAll('.totalfilling');
var interval = setInterval(function(){
degree+=1;
if(degree > targetDegree){
clearInterval(interval);
return;
}
if(targetDegree > 100){
percentage = targetDegree / degree;
console.log(percentage);
}
progress.style.background = `conic-gradient(
${color} ${degree}%, #222 0%)`;
number[0].innerHTML = degree;
console.log(degree);
number[0].style.color = color;
childNumber[0].innerHTML = '<h5>'+targetDegree+'</h5>'
}, 50)
});
});*
{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
.container .circle{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 200px;
height: 200px;
border-radius: 50%;
}
.container .circle::before{
content: '';
position:absolute;
inset: 5px;
border-radius: 50%;
background: #222;
opacity: 0.8;
}
.container .circle::after{
content: '';
position:absolute;
width:120px;
height: 120px;
border-radius: 50%;
background: #fff;
border: 15px solid #4d4c51;
box-shadow: inset 0 5px 10px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.75),
0 -2px 2px rgba(255,255,255,0.5),
inset 0 4px 2px rgba(0,0,0,0.25),
inset 0 -2px 2px rgba(255,255,255,0.5);
}
.container .circle .number{
position:relative;
color: #fff;
z-index: 10;
line-height: 1em;
font-size: 2em;
}
.container .circle .number span{
font-size: 0.5em;
font-weight: 500;
}
.container .circle h4{
position:relative;
color: #0b60e9;
z-index: 10;
font-weight: 500;
font-size: 0.8em;
line-height: 0.6em;
}
.countperhour{
margin-left:40px;
font-size:18px;
}
.totalfilling{
margin-top:10px;
color: black;
z-index: 10;
font-weight: 500;
font-size: 18px;
line-height: 0.6em;
} <div class="App">
<div class="container">
<div class="circle" data-degree="200" data-color="#0b60e9">
<div class="countperhour">
<h4>C/h</h4>
</div>
<h2 class="number"></h2>
<div class="totalfilling">
<h5>1000</h5>
</div>
</div>
</div>Please review the code above and provide your suggestions.