Progress Bar

ProgressBarは、処理の進行状況を視覚的に示すコンポーネントです。
主に、完了までの時間が予測できるタスクに使用されます。

プロパティ

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

名前 型 デフォルト値 説明
value number 0 進行状況を表現できます。
max number 100 進行状況の最大値を設定できます。

インストールの手順

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

atoms/ProgressBar.svelte 
        <!--
@component
## 概要
- 処理の進行状況を示すコンポーネント

## 機能
- 進行状況を受け取りその数値と最大値を比べて見た目を変更します

## Props
- value: 進行状況の数値
- max: 進行度合いの最大値
- onComplete: 処理が完了した時のイベントハンドラ

## Usage
```svelte
<ProgressBar {max} onComplete={() => alert('complete')} bind:value></ProgressBar>
```
-->

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

  export const progressBarVariants = cva('relative h-2 bg-base-container-muted rounded-full overflow-hidden');

  export const percentageVariants = cva('absolute top-0 left-0 h-full bg-primary rounded-full transition-[width] duration-500 ease-out');

  export type ProgressBarVariants = VariantProps<typeof progressBarVariants>;

  export interface ProgressBarProps extends ProgressBarVariants {
    /** 進行度の値 */
    value?: number;
    /** 最大値 */
    max?: number;
    /** 完了した際のハンドラ */
    onComplete?: () => void;
    /** クラス */
    class?: ClassValue;
  }
</script>

<script lang="ts">
  let { value = $bindable(0), max = 100, onComplete = () => {}, class: className }: ProgressBarProps = $props();

  let isCompleted = $state(false);

  let percentage = $derived((value / max) * 100);
  let progressBarVariantClass = $derived(progressBarVariants({ class: className }));

  $effect(() => {
    if (!isCompleted && value >= max) {
      isCompleted = true;
      onComplete?.();
    }

    if (value < max) {
      isCompleted = false;
    }
  });
</script>

<div class={progressBarVariantClass}>
  <div class={percentageVariants()} style="width: {percentage}%"></div>
</div>

使い方

サンプル

Default

進行状況をバーのみで表示する、最も基本的なスタイルです。

With Label

Progress Bar、ラベル、進行度を組み合わせた例です。