Progress Circle

• 조회 기간이 오래 걸리는 조회 화면에서 사용자가 대기 상태를 알 수 있도록 도와주는 컴포넌트

Basic

<script setup lang="ts">
import { ProgressCircle } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-circle ratio="0.46" class="w-20 h-20" />
</template>

46%

Animate

<script setup lang="ts">
import { ref, onUnmounted } from 'vue';
import { ProgressCircle } from '@jennifersoft/vue-components-v2';
const animateRatio = ref(0);

const intervalId = setInterval(() => {
    animateRatio.value += 0.01;
    if (animateRatio.value > 1) {
        animateRatio.value = 0;
    }
}, 100);

onUnmounted(() => {
    clearInterval(intervalId);
});
</script>
<template>
    <progress-circle :ratio="animateRatio" class="w-20 h-20" />
</template>

0%