I have a progress div container and an xhr request posting base64 images to the server.
The progress indicator div looks as follows:
<style>
.progresscover {
background: #eee;
width:100%;
height: 3px;
position: relative;
text-align: left;
}
.progress{
width:0%;
height:100%;
background: purple;
position:absolute:
left:0px;
top:0px;
bottom:0px;
}
</style>
<div class="progresscover"><div class="progress"></div></div>
from the XHR request i get following values loaded: 102533, total: 703227 The loaded obviously changes till its equal to the total..
what is the math to increase the width of the "progress" bar incrementally in percentages?
its like this -- parseInt( (loaded / total * 100), 10) + '%');
Are you trying to achieve something like this?
function percentage(num1,num2){
return (num1/num2) * 100
}
get = () =>{
let value1 = document.getElementById('first').value;
let value2 = document.getElementById('second').value;
document.getElementById('res').innerHTML = `<h2>the percentage is :` + percentage(value1,value2) + `% </h2>`;
document.getElementById('file').value = percentage(value1,value2)
} .a{
margin-bottom: 30px;
padding: 20px;
}
.one{
margin-bottom: 20px;
}
.two{
margin-bottom: 20px;
}
.res{
margin-bottom: 20px;
}
button {
margin-bottom: 30px;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
cursor: pointer;
} <div>
<div class="a">
<div class="one">first Number :<input type="number" id="first"></div>
<div class="two">second number :<input type="number" id="second"></div>
<button onclick="get()">Get Percentage</button>
</div>
<div id="res"></div>
<label for="file">Percentage:</label>
<progress id="file" max="100" value=""> </progress>
</div>