21 lines
776 B
Vue
21 lines
776 B
Vue
<template>
|
|
<ProgressRoot 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 w-0 transition-[width] ease-linear" :style="`transition-duration: ${delay}ms; width: ${progress ? 100 : 0}%`" />
|
|
</ProgressRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { delay = 1500, decreasing = false, shape = 'normal' } = defineProps<{
|
|
delay?: number
|
|
decreasing?: boolean
|
|
shape?: 'thin' | 'normal' | 'large'
|
|
}>();
|
|
|
|
const emit = defineEmits(['finish']);
|
|
|
|
const progress = ref(false);
|
|
nextTick(() => {
|
|
progress.value = true;
|
|
setTimeout(emit, delay, 'finish');
|
|
});
|
|
</script> |