プログレス・スピナー (Progress & Spinner)

進捗状況やローディング状態を表示するコンポーネントです。進捗バー、円形プログレス、各種スピナーアニメーションを提供します。

プログレスバー

基本的な使用

25% 完了
50%
75% 完了

基本のCode:

<div class=“progress progress-md”>
  <div class=“progress-bar” style=“width: 50%“>50%</div>
</div>

サイズ

サイズバリエーション

小さいサイズ
標準サイズ
大きいサイズ
80%
特大サイズ
90%

サイズのCode:

<div class=“progress progress-sm”>…</div>
<div class=“progress progress-md”>…</div>
<div class=“progress progress-lg”>…</div>
<div class=“progress progress-xl”>…</div>

色

色バリエーション

プライマリー
50%
セカンダリー
60%
成功
70%
警告
80%
危険
90%
情報
45%

色のCode:

<div class=“progress progress-lg progress-success”>
  <div class=“progress-bar” style=“width: 70%“>70%</div>
</div>

ストライプ・アニメーション

視覚効果

ストライプ
65%
アニメーション付きストライプ
75%
成功（アニメーション）
85%

ストライプのCode:

<div class=“progress progress-lg progress-striped progress-animated”>
  <div class=“progress-bar” style=“width: 75%“>75%</div>
</div>

円形プログレス

円形プログレス

60%
75%
90%
45%

円形プログレスのCode:

<div class=“progress-circle progress-circle-md”>
  <svg viewBox=“0 0 36 36”>
    <circle class=“progress-circle-track” cx=“18” cy=“18” r=“16”></circle>
    <circle class=“progress-circle-fill” cx=“18” cy=“18” r=“16”
            stroke-dasharray=“75, 100” stroke-dashoffset=“0”></circle>
  </svg>
  <div class=“progress-circle-text”>75%</div>
</div>

スピナー

リングスピナー

リングスピナーのCode:

<div class=“spinner spinner-md spinner-ring spinner-primary”></div>

ドットスピナー

ドットスピナーのCode:

<div class=“spinner-dots spinner-primary”>
  <div class=“spinner-dot”></div>
  <div class=“spinner-dot”></div>
  <div class=“spinner-dot”></div>
</div>

パルススピナー

パルススピナーのCode:

<div class=“spinner spinner-md spinner-pulse spinner-info”></div>

ラベル付きプログレス

詳細ラベル

ファイルアップロード3.2 MB / 5.0 MB
インストール進行中85%
ダウンロード124 KB/s
42%

ラベル付きのCode:

<div class=“progress-with-label”>
  <div class=“progress-label”>
    <span>ファイルアップロード</span>
    <span>3.2 MB / 5.0 MB</span>
  </div>
  <div class=“progress progress-md”>
    <div class=“progress-bar” style=“width: 64%”></div>
  </div>
</div>

ステップ式プログレス

マルチステップ

3
4
個人情報連絡先確認完了

ステップ式のCode:

<div class=“progress-steps”>
  <div class=“progress-step completed”>✓</div>
  <div class=“progress-connector completed”></div>
  <div class=“progress-step active”>2</div>
  <div class=“progress-connector”></div>
  <div class=“progress-step”>3</div>
</div>

実用的なパターン

ファイルアップロード

document.pdf
2.4 MB
アップロード中…68%

フォーム送信

送信中…
しばらくお待ちください

データ読み込み

ページローディング

読み込み中
コンテンツを準備しています…

ファイルアップロードのCode:

<div class=“border border-gray-200 rounded-lg p-4”>
  <div class=“flex items-center justify-between mb-3”>
    <div class=“flex items-center gap-3”>
      <svg class=“w-8 h-8 text-gray-400”>…</svg>
      <div>
        <div class=“font-medium text-sm”>document.pdf</div>
        <div class=“text-xs text-gray-500”>2.4 MB</div>
      </div>
    </div>
    <div class=“spinner spinner-sm spinner-ring spinner-primary”></div>
  </div>
  <div class=“progress progress-sm”>
    <div class=“progress-bar” style=“width: 68%”></div>
  </div>
</div>

ローディング画面のCode:

<div class=“loading-inline”>
  <div class=“text-center”>
    <div class=“spinner spinner-lg spinner-ring spinner-primary mb-4”></div>
    <div class=“text-lg font-medium text-gray-900 mb-2”>読み込み中</div>
    <div class=“progress progress-md max-w-xs mx-auto”>
      <div class=“progress-bar” style=“width: 35%”></div>
    </div>
  </div>
</div>

アクセシビリティ

  • • プログレスバーにはrole="progressbar"を設定
  • • aria-valuenow, aria-valuemin, aria-valuemaxで現在値を通知
  • • aria-labelまたはaria-labelledbyで進捗の内容を説明
  • • 不確定な進捗はaria-valuetext="読み込み中"を使用
  • • 色だけでなくパーセンテージやテキストでも進捗を表現
  • • 完了時にはaria-valuenow="100"と完了状態を通知
  • • 長時間の処理では定期的な進捗更新とキャンセル機能を提供
  • • スピナーにはaria-hidden="true"（装飾目的）またはラベルを設定
  • • 十分なコントラスト比を確保（背景色と進捗色）
75%
適切なARIA属性が設定されたプログレスバー