How Do I Trigger an element animation on a button click HTML CSS

Question

So I've created this form where there is a bar at the top and you answer a question, and when you do, the bar increases in width and goes to the next question. I looked at another StackOverflow post with a similar issue, but I was too dumb to understand any of the answers. So I thought to ask myself.

1. There Is A next button, and when you click the button the bar should increase but I have no idea how to make it do that

Here is the Code:

.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>

So yeah I have made the form itself, I just have no idea how to trigger the animation with the keyframes when you click the next button, and how to stop it from triggering on a reload of the page.

2. In the HTML, I have 2 divs, Form1 and Form2. Form 1 is what I want to be on the first screen, and then when you click the next button, it would also hide all the elements in form 1, and show all the ones in form 2, hopefully in a smooth transition.

3. (If possible) I'd like to store the data collected in the inputs when you move on so I could calculate some things in JavaScript but I also have no idea how to do that

I hope someone could help with this,

Thank you

Answer 1

Maybe you should use transition and use javascript to change the progress bar width.

The below code is how to make it without external libs. But I recommand using libaries like react, vue, etc. They will make it more easy.

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>

Answer 2

You can just use css sibling combinator to start the animation.

But your button must be before the navbar in the markup.

.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>