60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<script setup>
|
|
const interval = ref()
|
|
const progressValue = ref(0)
|
|
|
|
onMounted(() => {
|
|
interval.value = setInterval(() => {
|
|
if (progressValue.value === 100)
|
|
return progressValue.value = 0
|
|
progressValue.value += 10
|
|
}, 1000)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
clearInterval(interval.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VProgressCircular
|
|
:rotate="360"
|
|
:size="70"
|
|
:width="6"
|
|
:model-value="progressValue"
|
|
color="primary"
|
|
>
|
|
{{ progressValue }}
|
|
</VProgressCircular>
|
|
|
|
<VProgressCircular
|
|
:rotate="90"
|
|
:size="70"
|
|
:width="6"
|
|
:model-value="progressValue"
|
|
color="primary"
|
|
>
|
|
{{ progressValue }}
|
|
</VProgressCircular>
|
|
|
|
<VProgressCircular
|
|
:rotate="170"
|
|
:size="70"
|
|
:width="6"
|
|
:model-value="progressValue"
|
|
color="primary"
|
|
>
|
|
{{ progressValue }}
|
|
</VProgressCircular>
|
|
|
|
<VProgressCircular
|
|
:rotate="-90"
|
|
:size="70"
|
|
:width="6"
|
|
:model-value="progressValue"
|
|
color="primary"
|
|
>
|
|
{{ progressValue }}
|
|
</VProgressCircular>
|
|
</div>
|
|
</template>
|