Estoy tratando de animar una barra de progreso de Bootstrap 5 cuando se carga mi página. Esto parece funcionar, pero por otro lado anula la animación básica de arranque.
https://codepen.io/Gwentey/pen/gOeQVGZ
Aquí hay un fragmento para ver el problema que estoy teniendo. Cuando carga la página, la barra de progreso pasa del 0% al 20% y la animación ya no funciona...
Cuando carga la página, la barra de progreso pasa de 0% a 20% y la animación ya no funciona... Cuando carga la página, quiero que haya una animación de 0 a 20 (funciona pero detiene la animación). Luego, el usuario tiene que hacer clic para llegar a 40, luego a 60, luego a 80 y finalmente a 100. Mi problema es que la animación que agregué sobrescribe (creo) la animación de Bootstrap. Así que cuando el usuario pasa de 20 a 40 (con el botón) no hay efecto, y crea un cambio abrupto... (ver fragmento de código)
CSS:
.level-20 { width: 20%; animation: effetChargement 1s forwards; } .level-40 { width: 40%; } .level-60 { width: 60%; } .level-80 { width: 80%; } .level-100 { width: 100%; } @keyframes effetChargement { 0% { width: 0%; } 100% { width: 20%; } }html:
<div class="progress" style="height: 20px"> <div id="bar" class="progress-bar progress-bar-striped progress-bar-animated level-20" role="progressbar" aria-valuemin="0" aria-valuemax="100" ></div> </div> <button type="button" class="btn btn-primary my-3">Click to change level</button>No pongo el javascript porque solo sirve para detectar el clic en el boton y paso de nivel (nivel-20 -> nivel-40 -> nivel-60 -> nivel-80 -> nivel-100)
Gracias por adelantado
Usaría una transición en lugar de fotogramas clave (y agregaría la clase inicial usando js):
window.addEventListener('load', (event) => { const button = document.querySelector('button'); const bar = document.getElementById('bar'); bar.classList.add('level-20'); button.addEventListener('click', event => { if (bar.classList.contains("level-20")) { bar.classList.remove("level-20"); bar.classList.add("level-40"); } else if (bar.classList.contains("level-40")) { bar.classList.remove("level-40"); bar.classList.add("level-60"); } else if (bar.classList.contains("level-60")) { bar.classList.remove("level-60"); bar.classList.add("level-80"); } else if (bar.classList.contains("level-80")) { bar.classList.remove("level-80"); bar.classList.add("level-100"); } }); }); @import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'); .progress-bar { width: 0; transition: width 1s ease-in-out; } .level-20 { width: 20%; } .level-40 { width: 40%; } .level-60 { width: 60%; } .level-80 { width: 80%; } .level-100 { width: 100%; } <div class="progress" style="height: 20px"> <div id="bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> </div> <button type="button" class="btn btn-primary my-3">Click to change level</button>