在测验中设置进度条

$(document).ready(() => {

  let quiz_item = 0;
  $('.quiz-item').each(function(key) {
    quiz_item = key;
  });

  let ind = 1;
  $('.next').click(function() {
    if (!$('.quiz-item').last().hasClass('active')) {
      move(true);

      var i = ind++;

      if (i < 2) {
        $('.progress-bar').css('width', 100 / quiz_item + '%');
      } else {
        $('.progress-bar').css('width', (100 / quiz_item) + (100 / quiz_item) + '%');
      }
    }
  });

  $('.prev').click(function() {
    if (!$('.quiz-item').first().hasClass('active')) {
      move(false);
    }
  });

  function move(direction) {
    direction
      ?
      $('.active')
      .removeClass('active')
      .next()
      .addClass('active') :
      $('.active')
      .removeClass('active')
      .prev()
      .addClass('active');
  }
})

/* line 1, ../quiz/assets/scss/_main.scss */

html,
body {
  font-family: 'Montserrat';
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}


/* Section */


/* line 1, ../quiz/assets/scss/_general.scss */

* {
  margin: 0;
  padding: 0;
}


/* line 6, ../quiz/assets/scss/_general.scss */

body {
  font-family: 'Montserrat';
}


/* line 10, ../quiz/assets/scss/_general.scss */

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important;
}


/* line 35, ../quiz/assets/scss/_general.scss */

select:focus,
input:focus,
textarea:focus {
  border-color: #272727 !important;
  box-shadow: none !important;
}


/* line 42, ../quiz/assets/scss/_general.scss */

input:not([type="checkbox"]),
textarea {
  background-color: transparent !important;
  padding: 15px !important;
}


/* line 47, ../quiz/assets/scss/_general.scss */

textarea {
  min-height: 150px;
}


/* line 51, ../quiz/assets/scss/_general.scss */

input {
  color: #fff;
}


/* line 55, ../quiz/assets/scss/_general.scss */

.link {
  color: #000;
  text-decoration: none;
}


/* line 59, ../quiz/assets/scss/_general.scss */

.link:hover {
  color: #000;
}


/* line 1, ../quiz/assets/scss/_color.scss */

* {
  --main-text: #000;
  --text-span: rgba(255, 135, 67, 1);
  --main-promo: #A3B6C1;
  --main-background: #F6F6F6;
  --text-green: #56C167;
  --text-white: #fff;
  --text-green-hover: #2DAF42;
  --btn-shadow-green: 0px 5px 48px -10px rgba(86, 193, 103, 0.6);
}


/* line 3, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item {
  display: none;
}


/* line 6, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item.active {
  display: block;
}


/* line 10, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item .quiz-title {
  padding: 20px 0;
}


/* line 16, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn {
  width: 187px;
  font-size: 17px;
  background-color: var(--text-green);
  color: var(--text-white);
  -webkit-box-shadow: var(--btn-shadow-green);
  -moz-box-shadow: var(--btn-shadow-green);
  box-shadow: var(--btn-shadow-green);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


/* line 25, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn:hover {
  background-color: var(--text-green-hover);
  color: var(--text-white);
}

@media (max-width: 767px) {
  /* line 16, ../quiz/assets/scss/_quiz.scss */
  section#quiz .quiz-btn {
    font-size: 17px;
  }
}


/*# sourceMappingURL=style.css.map */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<section id="quiz" class="quiz my-5">
  <div class="container">
    <div class="quiz-items">
      <div class="progress mb-5">
        <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="quiz-item text-center active">
        <div class="quiz-title">
          <h1>Заявка на расчет стоимости!</h1>
        </div>
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 1" id="checkbox1">
          <label class="form-check-label" for="checkbox1">
                            Тест 1
                        </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
      <div class="quiz-item">
        <input type="text" class="form-control" placeholder="">
        <input type="text" class="form-control" placeholder="">
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
    </div>
    <div class="quiz-nav mt-5">
      <div class="d-flex justify-content-between">
        <a href="#!" class="btn quiz-btn prev">Назад</a>
        <a href="#!" class="btn quiz-btn next">Вперед</a>
      </div>
    </div>
  </div>
</section>