進捗状況インジケータ
1）原則
1.即時応答（≤ 100ms）。すべてのアクションはすぐに視覚的に確認されます：'busy '/skeleton/microanimation→を押します。
2.正直さと予測可能性。パーセンテージは「永遠の99％」ではなく、実際の進歩を反映しています。評価ができない場合は、不確定なバリアントと説明を使用してください。
3.アクティビティの横にあるコンテキスト。インジケータは、遠角ではなく、ユーザーが探している/演技（ボタン、カード、ブロック）です。
4.成功した後のステルス。成功は短いチェック/フェードであり、それだけです。エラー-わかりやすい説明と安全な繰り返し。
5.デフォルトの可用性。'role=「progressbar」'、 'aria-valuenow'、ライブ領域、AA ≥対照。
2）指標の種類と使用時期
線形進行（決定/不確定）。読み込み/読み込み/エクスポート、明確なスコープのステップ。
円の進行（通常は不確定）。密集した場所の短いローカル操作。
ステッパー（ステップバイステップ）。連続ステップ（「ステップ2の4」）、 KYC、マスタプロセス。
スケルトン（スケルトンプラグ）。スピナーの代わりにコンテンツ構造を置き換える。「prefers-reduced-motion」を持つユーザーは「shimmer」を避けてください。
ステータスバッジ（成功/警告/危険/情報）。オブジェクトの状態（In Process、 Rejected、 Ready）。
バナー/ステータストースト。グローバルイベント：オフライン、サーバー障害、キュー同期。
インラインローダー（ボタン/ライン）。ローカル操作： 「保存……」「送信……」
3）確定対不確実な進捗状況
確定：作業量がわかっている→％/ステージを表示します。
不確定：不明なボリューム→「処理中……」+コンテキスト（「通常1〜2分まで」）。
状態遷移-不確定→評価が表示されるかどうかを判断するために移動します。
慎重にETA：範囲（「~ 30-60秒」）を表示し「、約束」を避けます。
4）配置とパターン
ローカル操作：'aria-busy'ボタン、テーブル行のスピナー、カードの進行状況。
ブロック/リストの上：バッチ操作中にセクションヘッダーの下にあるリニアバー。
グローバル：トップ微妙な進捗状況（ルート変更）、システムバナー。
スティッキーパネル（モバイル）：下部ドックのCTAの確認/進行状況。
5）空室状況（A11y）
進捗状況：html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>不確定：set 'role=「progressbar」' without 'aria-valuenow'、 'role=「status」'に説明テキストを追加します。
ライブ領域："aria-live="polite"、定期的な更新の場合は"、assertive"、重要なものの場合のみ。
一時的にアクションによってブロックされるコンテナ上の'aria-busy=「true」'。
フォーカスは「ジャンプ」しない：ステージを変更するときは、フォーカスをステッピングステップヘッダーに移動します。
6）コピーライティングとビジュアルセマンティクス
簡単に、ケースで：「進行中のロード……」、「支払いの処理」……。
「What's next」： 「Done」を追加します。ページを自動的に更新しましょう。
色：緑-成功、オレンジ-警告/注意、赤-エラー。色≠意味の唯一の媒体です：アイコン/テキストを与えます。
7）アップビートの更新とプルバック
楽観的：UIをすぐに変更し（例えば「お気に入り」マーク）、サーバーで静かに確認します。
エラーの場合-ソフトロールバック+説明と'再試行'。
重要な操作（レート/支払い）：オプションで「ソフト楽観的」（修正「送信→確認を待っています……」）、しかし、確認前に金銭状態を変更することなく。
8）キューとバックグラウンドタスク
処理中のキュー：'n'タスク、進行状況のある個々のカードを表示します。
可能であれば、長い操作のために一時停止/キャンセルします。
バックグラウンド処理：「バックグラウンドで」バッジ、完了時に乾杯、「タスク履歴」セクション。
9）性能およびタイミング
最初の反応≤ 100ms： voidの代わりにskeleton/inline-busyを使用します。
アニメーション：120-180 ms （in）、 80-140 ms （out）、 'transform/opacity'のみ。
長いプロセス：進捗状況を10〜15回/秒以下に更新します。グループの変更。
10）スニペット
ボタンのローカル進行状況
html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>線形判定
html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>ステッパー
html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>11）スケルトン正しい
無限の輝きなしで（または'prefers-reduced-motion'で無効にする）、将来のコンテンツ（カード/ライン）の形式を使用します。
制限時間：ローディング>300-500ミリ秒、スケルトンは正当化されます；低遅延では「、マイクロフェード」で十分です。
12）ステータスバッジ（オブジェクト状態）
例はドラフト、In Process、保留中の確認、Ready、 Rejectedです。
短いテキスト、安定したアイコン/背景色、コントラスト≥ AA。
アイコン'aria-hidden=」true」+テキストラベル（SR用）。
クリック-詳細を表示するか「、履歴」を開きます。
13） iGamingの詳細
レート：- CTA→「Sent……」を押し、>3秒の遅延で「確認待ち」……（不確定）。
- 成功-「Bet accepted」+チェック。エラー-正直な説明（「市場期間閉鎖/比率変更」）と安全な再試行。
- ステージごとに「Check method→Send→Confirm PSP」を決定します。
- 出力の場合-プロセスバッジ、プロファイル内のステータス画面、ETA範囲；完了を押してください。
- 登録ステッパー（ステップ）、アワードへの進捗状況（N/ポイント）、「参加」ステータスバッジ。
- リアルタイムアップデート-"aria-live="polite"で、きちんとした、瞬きはありません。
- ステッパー+バッジ"レビュー中。"既に受け入れられているもの（ティック）と残っているものを表示します。
14）色、対照およびテキスト
成功/情報/警告/危険-設計システムの4つの安定したトーン。
バッジの背景とAA ≥テキストコントラスト。
「in process」と「warning」に同じ色を使用しないでください。
15）メトリクス
Time-to-First-Feedback （TTFF）：最初の視覚的応答をクリックします。
完了長いタスクの操作時間とドロップ/アボートレート。
プログレスオペレーションの再試行成功率。
成功した楽観主義者の％（およびロールバックのシェア）。
可視時間スケルトン/スピナー（ゴール：できるだけ少なく）。
16）アンチパターン
サイレントボタン（ビジー/スピナーなし）>100ミリ秒。
説明や代替のない無限のスピナー。
偽のパーセンテージ/99％ハングスライダー。
失敗時にコンテンツをリセットして再試行することはできません。
ステータスのテキスト/アイコンのない色のみ。
進捗状況はアクションから遠い（ユーザーは表示されません）。
17）システムトークンの設計（例）
json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }18） QAチェックリスト
応答と正直さ
- TTFF ≤ 100ミリ秒；地元の忙しい/スケルトンがあります。
- 決定-実際の％；不確定-説明付き。
空室状況
- 'role=「progressbar」'/'aria-valuenow'正しい；更新のライブ領域。
- バッジ/テキストの対照≥ AA；色は意味の唯一の担い手ではありません。
動作
- 正しいロールバックと説明で楽観的。
- キューが表示されます。（該当する場合）キャンセル/一時停止があります。
- 現場付近の進行状況はCTAと重なりません。
パフォーマンス
- 更新は10-15回以下/秒；'transform/opacity'アニメーション。
- スケルトンは'reduce-motion'でキラキラしない。
テキスト
- 短い、技術的な専門用語なし；完成した後の「what next」。
- 保証されない限り、正確な時間の「約束」はありません。
19）設計システムにおけるドキュメンテーション
プログレスバー：'ProgressBar'、 'ProgressCircle'、 'Stepper'、 'StatusBadge'、 'InlineLoader'、 'Skeleton'。
ステータスのタイプ、コピーライティング、色を選択するためのルール。
パターン：楽観的、キュー、背景処理、オフライン同期。
Do/Don 't gallery： 「perpetual spinner」、 false percentages「、mute」 CTA vs good TTFF。
概要
進捗状況の指標は、タイムリーで正直でアクセス可能なフィードバックを提供する必要があります。アクションと一緒に配置し、明確な進捗状況と不確実な進捗状況を区別し、a11yを尊重し、アニメーションを乱用しないでください。iGamingでは、これは賭け、支払い、トーナメント、KYCにとって特に重要です-穏やかで予測可能な進歩は直接信頼とコンバージョンを高めます。