dev-audioprocessing/pages/onbording.vue

<template>
  <div>
    <div class="container-fluid pt-3 ps-4">
      <div class="row">
        <div class="col-3">
          <a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
        </div>
        <div class="col-12 text-center justify-content-center col-lg-9 pt-1">
          <div class="progress mx-auto  ms-lg-3 mt-2 " style="width: 70%;height: 12px">
            <div class="progress-bar bar"  role="progressbar" :style="{ 'width': bar_val + '%' }"  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>


      <NuxtPage page-key="child" />


    </div>
  </div>
</template>


<script>
export default {
  data(){
    return{
      bar_val:25,
    }
  }
}
</script>

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