Spinner

• 데이터 로딩, 작업 진행 중 등의 대기 상태를 사용자에게 시각적으로 표시하는 컴포넌트
• 원형으로 회전하는 애니메이션을 통해 진행 중인 상태를 나타냄

Basic

<script setup lang="ts">
import { Spinner } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <Spinner />
</template>

Props

Prop	Type	Default	Description
color	string	var(--overlay-primary-900)	스피너의 색상
circleColor	string	-	배경 원의 색상(테마에 따라 사용)
duration	string	'1.5s'	애니메이션 시간 (예: '1.5s')
size	'mini' | 'small' | 'medium' | 'large'	'medium'	스피너 크기

Sizes

• Spinner는 mini, small, medium, large 네 가지 크기로 제공됩니다

<template>
    <div class="flex items-center space-x-4">
        <Spinner size="mini" />
        <Spinner size="small" />
        <Spinner size="medium" />
        <Spinner size="large" />
    </div>
</template>

Custom Color

• Spinner의 색상을 변경할 수 있습니다

<template>
    <div class="flex items-center space-x-4">
        <Spinner color="var(--primary-700)" />
        <Spinner color="var(--red-700)" />
        <Spinner color="var(--green-700)" />
    </div>
</template>

Custom Animation Duration

• Spinner의 애니메이션 속도를 조절할 수 있습니다 (기본값: 1.5s)

<script setup lang="ts">
import { ref } from 'vue';
import { Spinner } from '@jennifersoft/vue-components-v2';

const customDuration = ref('2000ms'); // 2 seconds
</script>
<template>
    <div class="flex items-center space-x-4">
        <div class="flex flex-col items-center">
            <span>Fast (500ms)</span>
            <Spinner :duration="'0.5s'" />
        </div>
        <div class="flex flex-col items-center">
            <span>Default (1.5s)</span>
            <Spinner :duration="'1.5s'" />
        </div>
        <div class="flex flex-col items-center">
            <span>Slow (2000ms)</span>
            <Spinner :duration="customDuration" />
        </div>
    </div>
</template>

Fast (500ms)

Default (1.5s)

Slow (2000ms)