Entonces, Bootstrap 5 tiene algunas barras de progreso múltiples elegantes.
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>Se ve bastante bien, pero estoy teniendo un gran dolor de cabeza tratando de hacer la cuenta regresiva con él.
A menos que me falte la capacidad de ajustar todo con un solo valor de ancho, mi problema es que debe comenzar con la barra inferior, reducir ese ancho, luego pasar a la barra central, reducirla a cero, y así. en.
Esto hace que las cosas sean bastante complejas, ni siquiera estoy seguro de querer mostrar mi código aquí porque mi cabeza da vueltas. Bien, aquí está:
// Select children of multi step bar var nodes = document.getElementById('progress-divided').children; // Loop through those children in reverse for (var i = nodes.length - 1; i >= 0; i--) { // Go to next step in loop if width is zero let percentageTime = nodes[i].ariaValueNow; if ( percentageProgress < ( 100 - percentageTime ) ) { nodes[i].style.width = 0 + "%" console.log("Moving to next step!") return } // grab the percentage of the total // work out the balance - ie 25% for a 75% addition let percentageBalance = 100 - percentageTime // remove that figure from the total to get an accurate countdown let secondsStepRemain = (diff - ( ( percentageBalance / 100 ) * secondsBoil )) // remove the time from the grain total to get the reduced fixed total let secondsStepTotal = ( percentageTime / 100 ) * secondsBoil // work out the percentage of this total - so 100 counting down let percentageStep = ( secondsStepRemain / secondsStepTotal ) * 100 // work out as a factor of the total let percentage = ( percentageStep / 100 ) * percentageTime // adjust the width nodes[i].style.width = percentage + "%"; // we only do this on one bar - so break if this is fulfilled break; }En realidad, esto cuenta hacia atrás hasta el primer paso, pero luego se confunde (creo que se está saliendo del ciclo cuando no debería).
¿Alguien tiene una solución más simple/elegante para este problema?
Uf, esto fue una locura. Desearía que Bootstrap tuviera algunas funciones integradas para que esto funcionara, ya que tomó un buen tiempo. Recibí algo de ayuda para construir la función del mapa, ¡así que no puedo reclamar todo el crédito!
La respuesta a esto fue tomar los porcentajes de las barras como una matriz, digamos en la respuesta anterior: [15, 30, 20, 35] , el mío siempre comienza en 100%, luego los procesa y luego los vuelve a aplicar al DOM elemento.
// the total elapsed percentage let percentageElapsed = 75 // the array I'm using to calculate the progress bar let percentages = [15, 30, 20, 35] // Process the array - remove from the first element // then the second, until the total is finished percentages = percentages.map((d) => { let _x = percentageElapsed - d; let sum = _x >= 0 ? 0 : -_x; percentageElapsed = _x > 0 ? _x : 0; return sum; }); // I had to reverse this here to get it to work properly percentages = percentages.reverse() // Grab the DOM elements I want to work on // the `progress-divided` element is the parent element var nodes = document.getElementById('progress-divided').children; // Apply this back to the DOM for (let i = 0; i < nodes.length; ++i) { nodes[i].style.width = percentages[i] + "%" }