dev-audioprocessing/pages/onboarding.vue

<template>
  <div>
    <video-background
        src="video/bg-video.mp4"
        style=" height: 100vh;"
    >

    <div class="container-fluid pt-3 ps-4">
      <div class="row">
        <div class="col-12 col-lg-3 text-start">
          <nuxt-link class="navbar-brand" to="/">
            <img src="/svglogo.svg" height="35" class="img " alt="imae">
        </nuxt-link>
        </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': count + '%' }"  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>


      <NuxtPage page-key="child" />


    </div>
    </video-background>
  </div>
</template>


<script>
import {useCounterStore} from '@/stores/counter';
import {mapState,mapActions} from "pinia";
export default {
  computed:{...mapState(useCounterStore,['count'])},
  methods:{
    ...mapActions(useCounterStore,['increment']),
    ...mapActions(useCounterStore,['decrement'])
  },
  data(){
    return{
      bar_val:25,
    }
  }
}
</script>

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