dev-audioprocessing/pages/onbording/onbording2.vue

<template>
  <div>
        <div class="row">
        <div class="col-12 pt-3">
          <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
        </div>
        <div class="col-12">
          <h4 class="text-center fw-bold pt-5">Do your headphones have ANC?</h4>
          <h6 class="text-center text-muted">What’s that?</h6>
        </div>
        <div class=" pt-5 text-center">
          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
          <label class="btn btn-outline-warning py-3 px-5" for="success-outlined">
            <img src="~/assets/image/AirPodsPro.png" style="height: 60px">
            <p class="text-white text-center">In-Ear</p>
          </label>

          <input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
          <label class="btn btn-outline-warning ms-3 py-3 px-5" for="danger-outlined">
            <img src="~/assets/image/AirPodsProMax.png" style="height: 60px">
            <p class="text-white text-center">In-Ear</p>
          </label>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name:'OnBording',
  data(){
    return{
      bar_val:25,
    }
  }
}
</script>

<style>
.bar{
  background-color: #e9c046;
}
</style>