Progress
Size
Size
Small, Normal (default), Large.
<template>
<div>
<v-progress size="small"></v-progress>
<v-progress size="normal"></v-progress>
<v-progress size="large"></v-progress>
</div>
</template>
Theme
Theme
Basic (default), Important, Positive
<template>
<div>
<v-progress theme="basic"></v-progress>
<v-progress theme="important"></v-progress>
<v-progress theme="positive"></v-progress>
</div>
</template>
If you don't set this props, it will gives 'basic'.
Label
50% Loaded
Label
label
<template>
<div>
<v-progress label></v-progress>
</div>
</template>
Step
50% Loaded
50% Loaded
50% Loaded
!Error: You cannot set step over 10 or below 1
Step
step = 5 / step = 10
<template>
<div>
<v-progress step="5" label></v-progress>
<v-progress step="10" label></v-progress>
<v-progress step="20" label></v-progress>
</div>
</template>
If you set 'step' over 10 or below 1; it will give error message with red color and set 'step' as 10.
Value
20% Loaded
Value
value
<template>
<div>
<v-progress :value="num" label></v-progress>
</div>
</template>
<script setup lang="ts">
import { ref, Ref, onMounted } from 'vue';
const num: Ref<number> = ref(20);
//模拟进度数值变化
onMounted(() => {
setInterval(() => {
if (num.value >= 99.99) num.value = 20;
num.value += 0.1;
}, 20);
});
</script>
You can bind 'value' to the actual progress value to show the animation.
Attention: the 'value' can only below 100.