En la carga del documento, necesito tres barras de progreso para ejecutarlas secuencialmente una tras otra usando Vanilla JS, HTML y CSS. Entonces, cuando el primero termina de cargarse (su valor máximo), el siguiente se dispara. No estoy buscando una solución CSS complicada. Tengo curiosidad por saber cómo hacer esto solo con Vanilla JS sin un enfoque setTimeout.
Creé esto en jsfiddle https://jsfiddle.net/blitzr/vf78hu0g/3/
<div> <label>Bar 1</label> <progress class="progressBars" value="0" max = "90"></progress> <br> <label>Bar 2</label> <progress class="progressBars" value="0" max = "35"></progress> <br> <label>Bar 3</label> <progress class="progressBars" value="0" max = "35"></progress> <br> </div>Estoy mostrando cómo me acercaría a una barra de progreso.
var index = 0; var id; let bars = document.getElementsByClassName(`progressBars`); this.id = setInterval(() => { increaseProgress(bars[this.index]) }, 10 ); function increaseProgress(bar) { if (bar.value < bar.max) bar.value++; else { clearInterval(this.id); } }Con el siguiente CSS
progress { width: 500px; } progress::-webkit-progress-bar{ background-color: gray; } progress::-webkit-progress-value{ background-color: green; }Puede escribir una función que inicie un temporizador de intervalo para una barra en particular dentro de suHTMLCollection de bars . La función puede aceptar un índice que representa en qué barra iniciar el progreso y luego usará setInterval() para actualizar el valor de esa barra de progreso en particular. Cuando la barra está llena, puede borrar su intervalo y luego volver a llamar a su función con el índice de la siguiente barra en su colección, que estaría en index+1 . Antes de ejecutar su función, también puede verificar que la bar esté definida, ya que eventualmente se pasará un índice que no existe en sus bars HTMLCollection:
const bars = document.getElementsByClassName('progressBars'); function startProgress(bars, index = 0) { const bar = bars[index]; if (!bar) return; const id = setInterval(() => { if (bar.value < bar.max) bar.value++; else { clearInterval(id); startProgress(bars, index + 1); } }, 10); } startProgress(bars); <label>Bar 1</label> <progress class="progressBars" value="0" max="90"></progress> <br /> <label>Bar 2</label> <progress class="progressBars" value="0" max="35"></progress> <br /> <label>Bar 3</label> <progress class="progressBars" value="0" max="35"></progress>