0
510
VistasCómo agregar una línea vertical al final de una barra de porcentaje HTML/Javascript
Estoy usando el siguiente código HTML/Javascipt para hacer la barra de porcentaje clásica.
function update() { var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 70) { clearInterval(identity); } else { width++; element.style.width = width + '%'; element.innerHTML = width * 1 + '%'; } } } #Progress_Status { width: 50%; background-color: #ddd; } #myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; } <!DOCTYPE html> <html> <body> <h3>Example of Progress Bar Using JavaScript</h3> <p>Download Status of a File:</p> <div id="Progress_Status"> <div id="myprogressBar">1%</div> </div> <br> <button onclick="update()">Start Download</button> </body> </html> Lo que me gustaría obtener y estoy tratando de lograr con .innerHTML es la siguiente situación
La línea vertical tiene que aparecer al mismo nivel del porcentaje especificado.
2 Respuestas
Responde la pregunta0
Para la barra vertical, utilicé un div agregado anidado dentro del contenedor #Progress_Status. Está diseñado para tener una posición absoluta y cambiar su compensación en % en sincronización con el ancho de la barra de progreso.
Para que funcione, su contenedor se configuró en position:relative como marco de referencia.
function update() { //fetches the vertical bar elements var vbar = document.querySelector("#Progress_Status .percverticalbar"); var element = document.getElementById("myprogressBar"); var width = 1; var identity = setInterval(scene, 10); function scene() { if (width >= 70) { clearInterval(identity); } else { width++; //updates the left offset of the vertical bar vbar.style.left = `${width}%`; element.style.width = width + '%'; element.innerHTML = width * 1 + '%'; } } } #Progress_Status { width: 50%; background-color: #ddd; position: relative; } .percverticalbar{ position: absolute; height: 100px; width: 5px; background: gray; top: -25px; left: 0; } #myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; margin: 50px 0; } <h3>Example of Progress Bar Using JavaScript</h3> <p>Download Status of a File:</p> <div id="Progress_Status"> <div id="myprogressBar">1%</div> <div class="percverticalbar"></div> </div> <br> <button onclick="update()">Start Download</button>0
Simplemente puede agregar un pseudo elemento :after y agregarle los siguientes estilos. Tenga en cuenta que el padre, en el caso de #myprogressBar, debe estar relativamente posicionado.
#myprogressBar { width: 1%; height: 35px; background-color: #4CAF50; text-align: center; line-height: 32px; color: black; position: relative; } #myprogressBar:after { width: 5px; height: 80px; background: #333; content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); border-radius: 5px; }