Spinner

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

Props

Prop	Type	Default	Description
type	string	'default'	스피너 타입 ('default', 'progress')
color	string	var(--overlay-primary-900)	스피너의 색상
circleColor	string	var(--overlay-primary-100)	progress 타입에서 배경 원의 색상
duration	number	1000	애니메이션 완료 시간 (밀리초)
size	string	'medium'	스피너 크기 ('small', 'medium', 'large')

Basic

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

Sizes

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

<template>
    <div class="flex items-center space-x-4">
        <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의 애니메이션 속도를 조절할 수 있습니다 (기본값: 1000ms)

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

const customDuration = ref(2000); // 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="500" />
        </div>
        <div class="flex flex-col items-center">
            <span>Default (1000ms)</span>
            <Spinner :duration="1000" />
        </div>
        <div class="flex flex-col items-center">
            <span>Slow (2000ms)</span>
            <Spinner :duration="customDuration" />
        </div>
    </div>
</template>

Fast (500ms)

Default (1000ms)

Slow (2000ms)

Progress Type

• Progress 타입의 스피너는 배경 원이 표시되어 진행 상태를 시각적으로 더 명확하게 보여줍니다

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

Progress with Custom Colors

• Progress 타입에서는 배경 원의 색상을 circleColor prop으로 설정할 수 있습니다

<template>
    <div class="flex items-center space-x-4">
        <Spinner
            type="progress"
            color="var(--overlay-purple-900)"
            circleColor="var(--overlay-purple-100)"
        />
        <Spinner
            type="progress"
            color="var(--overlay-red-900)"
            circleColor="var(--overlay-red-100)"
        />
        <Spinner
            type="progress"
            color="var(--overlay-blue-900)"
            circleColor="var(--overlay-blue-100)"
        />
    </div>
</template>