Así que creé este formulario donde hay una barra en la parte superior y respondes una pregunta, y cuando lo haces, la barra aumenta de ancho y pasa a la siguiente pregunta. Miré otra publicación de StackOverflow con un problema similar, pero era demasiado tonto para entender cualquiera de las respuestas. Así que pensé en preguntarme.
1. Hay un botón siguiente, y cuando haces clic en el botón, la barra debería aumentar, pero no tengo idea de cómo hacerlo.
Aquí está el código:
.next { width: 150px; height: 35px; background-color: var(--main-solid); border: none; border-radius: 80px; left: 45vw; position: absolute; top: 80%; outline: 3px white solid; cursor: pointer; transition: .5s; } .loading .line { height: 4px; border-radius: 20px; background: var(--main-solid); position: absolute; left: 0%; top: 48%; width: 17.6%; animation: loading 1s forwards cubic-bezier(0,0,0,0); } @keyframes loading { 0%{ width: 0%; } 100%{ width: 17.6%; } } <div class="navbar"> <div class="loading"> <div class="line"> </div> </div> </div> <button class="next">Next</button>Entonces, sí, hice el formulario en sí, simplemente no tengo idea de cómo activar la animación con los fotogramas clave cuando hace clic en el botón siguiente, y cómo evitar que se active en una recarga de la página.
2. En el HTML, tengo 2 divs, Form1 y Form2. El formulario 1 es lo que quiero que sea en la primera pantalla, y luego, al hacer clic en el siguiente botón, también ocultaría todos los elementos del formulario 1 y mostraría todos los del formulario 2, con suerte en una transición suave.
Espero que alguien pueda ayudar con esto,
Gracias
Tal vez debería usar transition y usar javascript para cambiar el ancho de la barra de progreso.
El siguiente código es cómo hacerlo sin bibliotecas externas. Pero recomiendo usar bibliotecas como react , vue , etc. Lo harán más fácil.
const progressBar = document.getElementById("progressBar"); const nextButton = document.getElementById("nextBtn"); nextButton.addEventListener("click", () => { let progress = parseInt(progressBar.style.width) || 0; progress = Math.min(progress + 10, 100); progressBar.style.width = `${progress}%`; }); .progress-bar { display: inline-block; width: 200px; height: 10px; line-height: 10px; background-color: gray; } .progress-inner { display: inline-block; width: 0%; height: 100%; background-color: red; transition: width 300ms; } <div class="progress-bar"> <div id="progressBar" class="progress-inner" style="width: 0%;"></div> </div> <div> <button id="nextBtn" type="button">Next</button> </div>Simplemente puede usar el css sibling combinator para iniciar la animación.
Pero su botón debe estar antes de la barra de navegación en el marcado.
.next { width: 150px; height: 35px; background-color: red; border: none; border-radius: 80px; left: 45vw; position: absolute; top: 80%; outline: 3px white solid; cursor: pointer; transition: 0.5s; } .loading .line { height: 4px; border-radius: 20px; background: red; position: absolute; left: 0%; top: 48%; width: 0%; } .next:focus + .navbar .loading .line { animation: loading 1s forwards cubic-bezier(0, 0, 0, 0); } @keyframes loading { 0% { width: 0%; } 100% { width: 17.6%; } } <button class="next">Next</button> <div class="navbar"> <div class="loading"> <div class="line"></div> </div> </div>