Tengo un contenedor div de progreso y una solicitud xhr que publica imágenes base64 en el servidor.
El indicador de progreso div tiene el siguiente aspecto:
<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>de la solicitud XHR obtengo los siguientes valores cargados: 102533, total: 703227 El cargado obviamente cambia hasta que es igual al total.
¿Cuál es la matemática para aumentar el ancho de la barra de "progreso" de forma incremental en porcentajes?
es así -- parseInt((cargado/total * 100), 10) + '%');
¿Estás tratando de lograr algo como esto?
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>