Spinner

Spinnerは、アニメーションを使用して、処理中であることを視覚的に示します。

プロパティ

Spinnerは、以下のプロパティをサポートしています。

名前 型 デフォルト値 説明
size string 3rem サイズを指定します。
color string color-primary カラーを指定します。カラーコードに対応します。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

atoms/Spinner.svelte 
        <!--
@component
## 概要
- Spinnerは、処理が進行中であることを示すコンポーネントです

## 機能
- アニメーションを使用して、処理中であることを視覚的に示します

## Props
- size: スピナーのサイズを指定します
- color: スピナーの色を指定します

## Usage
```svelte
<Spinner {size} {color}/>
```
-->

<script module lang="ts">
  import type { ClassValue } from 'svelte/elements';
  import { cva, type VariantProps } from 'class-variance-authority';

  export const spinnerVariants = cva('animate-spin [animation-duration:1.2s] [animation-timing-function:ease-in-out]');

  export type SpinnerProps = VariantProps<typeof spinnerVariants>;
  export interface SpinnerComponentProps extends SpinnerProps {
    /** スピナーのサイズ */
    size?: string;
    /** スピナーの色 */
    color?: string;
    /** クラス */
    class?: ClassValue;
  }
</script>

<script lang="ts">
  import { LoaderCircle } from '@lucide/svelte';

  let { size = '3rem', color = 'var(--color-primary)', class: className }: SpinnerComponentProps = $props();

  let spinnerVariantClass = $derived(spinnerVariants({ class: className }));
</script>

<LoaderCircle {size} {color} class={spinnerVariantClass} />

使い方

サンプル

Default

主にタスクが終了するまでの時間が不明な場合に使用されます。

Color

colorの指定で色が変えられます。

Sizes

sizeの指定で大きさが変えられます。