JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" class="form">
  <div class="form__item form__item--active">
    <h3>Item 1</h3>
    <label class="form__label">
      <input type="radio" name="r">
      1
    </label>
    <label class="form__label">
      <input type="radio" name="r">
      2
    </label>
  </div>
  <div class="form__item">
    <h3>Item 2</h3>
    <label class="form__label">
      <input type="radio" name="r2">
      3
    </label>
    <label class="form__label">
      <input type="radio" name="r2">
      4
    </label>
  </div>
  <div class="form__item">
    <h3>Item 3</h3>
    <label class="form__label">
      <input type="radio" name="r3">
      5
    </label>
    <label class="form__label">
      <input type="radio" name="r3">
      6
    </label>
  </div>  
  
  <div class="form__progress">
    <div class="form__progress-line"></div>
  </div>
</form>

<div class="result">Result ....</div>

CSS

.form{
  display: block;
  padding: 1rem;
  background-color: #f7f7f7;
  font-size: 1.3rem;
}

.form__item{
  display: none;
}

.form__item--active{
  display: block;
}


.form__progress{
  margin-top: 25px;
  height: 20px;
  width: 100%;
  background-color: #ccc;
  position: relative;
}

.form__progress-line{
  position: absolute; top: 0; left: 0;
  width: 0;
  height: 100%;
  background-color: green;
  transition: width .7s ease-in-out;
  transition-delay: 1s;
}


.result{
  display: none;
  font-size: 50px;
  position: fixed; top: 0; left: 0;
  width: 100%;
  height: 100%;
  
  align-items: center;
  justify-content: center;
}

.result--active{
  display: flex;
}

JavaScript

(function() {

  'use strict';

  const form = document.querySelector('.form');
  const formItems = form.querySelectorAll('.form__item');
  const formRadios1 = formItems[0].querySelectorAll('.form__label');
  const formRadios2 = formItems[1].querySelectorAll('.form__label');
  const formRadios3 = formItems[2].querySelectorAll('.form__label');  
  const formProgress = form.querySelector('.form__progress');
  const formProgressLine = formProgress.querySelector('.form__progress-line');
  const formProgressStart = 100 / formItems.length;
  const result = document.querySelector('.result');

  setTimeout(() => {
    formProgressLine.style.width = `${formProgressStart}%`;
  }, 0);

  formRadios1.forEach((radio, index) => {
    radio.addEventListener('click', () => {
      setTimeout(() => {
        formItems[0].classList.remove('form__item--active');
        formItems[1].classList.add('form__item--active');
      }, 1000);
      formProgressLine.style.width = `${formProgressStart * 2}%`;
    });
  });

  formRadios2.forEach((radio, index) => {
    radio.addEventListener('click', () => {
      setTimeout(() => {
        formItems[1].classList.remove('form__item--active');
        formItems[2].classList.add('form__item--active');
      }, 1000);
      formProgressLine.style.width = `${formProgressStart * 3}%`;
    });
  });

  formRadios3.forEach((radio, index) => {
    radio.addEventListener('click', () => {
      setTimeout(() => {
        form.style.display = 'none'
        result.classList.add('result--active');
      }, 1000);
    });
  });


})();