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 ><div ></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?

CodePudding user response：

its like this -- parseInt( (loaded / total * 100), 10) '%');

CodePudding user response：

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 >
      <div >first Number :<input type="number" id="first"></div>
      <div >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>