30 lines
676 B
Vue
30 lines
676 B
Vue
<style scoped>
|
|
.progress-bar {
|
|
background-color: #0d6efd;
|
|
transition: width 0.3s ease;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="small text-muted">Step {{ step }} of {{ maxSteps }}</span>
|
|
</div>
|
|
<div class="progress" style="height: 8px">
|
|
<div
|
|
class="progress-bar"
|
|
role="progressbar"
|
|
:style="{ width: (step / maxSteps) * 100 + '%' }"
|
|
aria-valuenow="12"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
step: number;
|
|
}
|
|
const props = defineProps<Props>();
|
|
const maxSteps = 8;
|
|
</script>
|