プログレスバー

ProgressBarコンポーネントは、タスクの進捗状況や完了度を視覚的に表示するためのコンポーネントです。ファイルアップロード、フォーム完了度、目標達成率などの様々な場面で使用できます。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

バリエーション: Default、Success、Warning、Error、Stripedの5種類
サイズ: Small (sm)、Medium (md)、Large (lg)の3サイズ
ラベル表示: 進捗率やカスタムラベルの表示
テーマ対応: ライトテーマとダークテーマの自動切り替え
アクセシビリティ: ARIA属性とスクリーンリーダー対応

使用方法

---
import { ProgressBar } from '@karan-monorepo/ui-core';
---

<kds-progress-bar value={75} max={100} variant="default" theme="light" />

プロパティ

プロパティ	型	デフォルト	説明
`value`	`number`	`0`	現在の値
`max`	`number`	`100`	最大値
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'striped'`	`'default'`	バリエーション
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	サイズ
`showLabel`	`boolean`	`false`	ラベルを表示するかどうか
`label`	`string`	`''`	カスタムラベル
`theme`	`'light' \| 'dark'`	`'light'`	テーマ

使用例

ProgressBar Component

Progress bar component for displaying completion status and loading states.

Variants

Default

Success

Warning

Error

Striped

Sizes

Small

Medium

Large

With Labels

With Label

Custom Label

Themes

Light Theme

Dark Theme

Usage Examples

File Upload Progress

document.pdf 2.5 MB

image.jpg 1.2 MB

Task Completion

Design Phase Completed

Development In Progress

Testing Pending

System Status

CPU Usage 45%

Memory Usage 78%

Disk Space 92%

バリエーション

ProgressBarコンポーネントは5つの視覚的バリエーションをサポートします：

default: 標準的なプログレスバー
success: 成功状態を示す緑のプログレスバー
warning: 警告状態を示す黄色のプログレスバー
error: エラー状態を示す赤のプログレスバー
striped: ストライプ模様のプログレスバー

<!-- デフォルト -->
<kds-progress-bar value={75} max={100} variant="default" theme="light" />

<!-- 成功 -->
<kds-progress-bar value={90} max={100} variant="success" theme="light" />

<!-- 警告 -->
<kds-progress-bar value={60} max={100} variant="warning" theme="light" />

<!-- エラー -->
<kds-progress-bar value={30} max={100} variant="error" theme="light" />

<!-- ストライプ -->
<kds-progress-bar value={50} max={100} variant="striped" theme="light" />

サイズバリエーション

ProgressBarコンポーネントは3つのサイズをサポートします：

sm: 小さなプログレスバー
md: 標準的なプログレスバー
lg: 大きなプログレスバー

<!-- 小さなサイズ -->
<kds-progress-bar value={75} max={100} size="sm" theme="light" />

<!-- 標準サイズ -->
<kds-progress-bar value={75} max={100} size="md" theme="light" />

<!-- 大きなサイズ -->
<kds-progress-bar value={75} max={100} size="lg" theme="light" />

ラベル表示

ラベルなし

<kds-progress-bar value={75} max={100} theme="light" />

ラベルあり

<kds-progress-bar value={75} max={100} showLabel theme="light" />

カスタムラベル

<kds-progress-bar value={75} max={100} showLabel label="進捗状況" theme="light" />

使用ケース

ファイルアップロード

<kds-progress-bar
  value={65}
  max={100}
  showLabel
  label="アップロード中..."
  variant="default"
  theme="light"
/>

目標達成率

<kds-progress-bar
  value={80}
  max={100}
  showLabel
  label="月間目標"
  variant="success"
  theme="light"
/>

フォーム完了度

<kds-progress-bar
  value={40}
  max={100}
  showLabel
  label="フォーム完了度"
  variant="warning"
  theme="light"
/>

スタイリング

ProgressBarコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

ProgressBarコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTMLの<progress>要素を使用
ARIA属性（role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax）
スクリーンリーダー対応の進捗状況読み上げ
高コントラスト比による視認性の確保

ベストプラクティス

バリエーションは意味に基づいて選択する（成功=緑、警告=黄、エラー=赤など）
ラベルで進捗の内容を明確にする
適切なサイズを選択してコンテキストに応じる
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

ProgressBarコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Flexbox