13 lines
648 B
Vue
13 lines
648 B
Vue
<template>
|
|
<ProgressRoot :max="max" v-model="model" class="my-2 relative overflow-hidden bg-light-25 dark:bg-dark-25 w-48 h-3 data-[shape=thin]:h-1 data-[shape=large]:h-6" :data-shape="shape" style="transform: translateZ(0)" >
|
|
<ProgressIndicator class="bg-light-50 dark:bg-dark-50 h-full transition-[width] duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]" :style="`width: ${((model ?? 0) / max) * 100}%`" />
|
|
</ProgressRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { max = 100, shape = 'normal' } = defineProps<{
|
|
max?: number
|
|
shape?: 'thin' | 'normal' | 'large'
|
|
}>();
|
|
const model = defineModel<number>();
|
|
</script> |