Progress

Stablev0.3.0

タスクの進捗状況を視覚的に表示するプログレスバー。線形とサーキュラーの2種類を提供します。

基本的な使い方

シンプルなプログレスバー

tsx

class="token keyword">import { Progress } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Progress value={class="token number">30} />
<class="token tag">Progress value={class="token number">60} />
<class="token tag">Progress value={class="token number">100} />

バリアント

状態を表すカラーバリエーション

Default

Success

Warning

Error

サイズ

3つのサイズバリエーション

Small

Medium (default)

Large

ラベル付き

パーセンテージを表示

45%

78%

tsx

<class="token tag">Progress value={class="token number">45} showLabel />

アニメーション

動的に変化するプログレスバー

CircularProgress

サーキュラー（円形）プログレス

Small

75%

Medium

75%

Large

75%

25%

50%

75%

100%

tsx

class="token keyword">import { CircularProgress } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">CircularProgress value={class="token number">75} size=class="token keyword">class="token string">"lg" />
<class="token tag">CircularProgress value={class="token number">100} variant=class="token keyword">class="token string">"success" />

使用例

実際の使用シーン

document.pdf2.4 MB

アップロード中... 67%

ストレージ使用量7.2 GB / 10 GB

セットアップ進捗

100%

アカウント作成

100%

プロフィール設定

50%

チーム招待

完了

Props API

Prop	Type	Default	Description
`value`	`number`	`0`	現在の進捗値（0-100）
`max`	`number`	`100`	最大値
`variant`	`"default" \| "success" \| "warning" \| "error"`	`"default"`	カラーバリアント
`size`	`"sm" \| "md" \| "lg"`	`"md"`	サイズ
`showLabel`	`boolean`	`false`	パーセンテージラベルを表示

Accessibility

role='progressbar' を使用
aria-valuenow で現在値を伝達
aria-valuemin, aria-valuemax で範囲を指定
aria-label で目的を説明可能