プログレスバー Progress Bar

処理の進捗状況を横棒で視覚的に表示する。

使用場面: ファイルアップロード進捗、フォーム入力進捗、スキルレベル表示 採用例: LinkedIn, Duolingo

ライブデモ

プロフィール完成度 75%
ストレージ使用量 45%
アップロード中 90%

ソースコード

<div class="demo-progress-list">
  <div class="demo-progress-item">
    <div class="demo-progress-header">
      <span>プロフィール完成度</span>
      <span class="demo-progress-value">75%</span>
    </div>
    <div class="demo-progress-track">
      <div class="demo-progress-fill" style="width:75%"></div>
    </div>
  </div>
  <div class="demo-progress-item">
    <div class="demo-progress-header">
      <span>ストレージ使用量</span>
      <span class="demo-progress-value">45%</span>
    </div>
    <div class="demo-progress-track">
      <div class="demo-progress-fill" style="width:45%"></div>
    </div>
  </div>
  <div class="demo-progress-item">
    <div class="demo-progress-header">
      <span>アップロード中</span>
      <span class="demo-progress-value">90%</span>
    </div>
    <div class="demo-progress-track">
      <div class="demo-progress-fill demo-progress-striped" style="width:90%"></div>
    </div>
  </div>
</div>
.demo-progress-list { display: flex; flex-direction: column; gap: 18px; max-width: 400px; }
.demo-progress-header { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.demo-progress-value { font-weight: 700; color: var(--ui-primary); }
.demo-progress-track {
  height: 10px; background: #e5e7eb; border-radius: 5px; overflow: hidden;
}
.demo-progress-fill {
  height: 100%; background: var(--ui-primary); border-radius: 5px;
  transition: width 0.6s ease-out;
}
.demo-progress-striped {
  background-image: linear-gradient(
    45deg, rgba(255,255,255,0.2) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.2) 75%, transparent 75%
  );
  background-size: 20px 20px;
  animation: demo-progress-stripe 0.6s linear infinite;
}
@keyframes demo-progress-stripe { from { background-position: 20px 0; } to { background-position: 0 0; } }

AIプロンプト

Basic 
プログレスバーをHTML/CSSで作ってください。横棒で進捗状況を表示するUIです。
Custom 
以下の仕様でプログレスバーを実装してください。
- プライマリカラー: #2563eb
- パーセンテージ表示
- ストライプアニメーション（進行中）
- カラーバリエーション（通常/警告/エラー）
- 丸みのあるデザイン
- ラベル + 値の表示
Advanced 
高機能プログレスバーを実装してください。
- 円形（サーキュラー）プログレスバー
- セグメント型（ステッパー）
- 不確定状態（indeterminate）のアニメーション
- role="progressbar" + aria-valuenow, aria-valuemin, aria-valuemax
- aria-label で進捗をスクリーンリーダーに通知
- リアルタイム更新アニメーション（数値変化に連動）
- グラデーション対応
- バッファリング表示（YouTube風）
- prefers-reduced-motion 対応
← カタログに戻る