スケルトン・スピナー・プログレス

待たせる間、スケルトン・スピナー・プログレス表示のどれを見せる？

判断表

判断軸	スケルトンローディングこれから出る形を先に見せる	ローディングスピナー動いていることだけ伝える	ドーナツ進捗どこまで進んだかを数で見せる（円形）
待ち時間の目安	1〜数秒。画面の初期表示・一覧の読み込み	1秒前後の短い処理。ボタン内にも置ける	数秒以上で、進捗が測れる処理（アップロード）
終わりの見え方	見えないが、形が分かるので不安が少ない	見えない。長いと不安になる	見える。残りを推測できる
レイアウトシフト	起きない（同じ形で差し替える）	起きやすい（スピナーの高さと中身の高さが違う）	処理の結果とは別の場所に置くので影響しない
実装コスト	画面ごとに形を作る。skeleton-to-content で差し替え	最小。CSS だけで済む	進捗の数値を出す仕組みが要る
支援技術	装飾なので aria-hidden。完了は aria-live で知らせる	role=status・aria-label=読み込み中を見本が付けている	aria-label に数値を含め、変化を読ませる

迷ったら、表示される内容の形が分かっているならスケルトン、分からない短い処理ならスピナー。ただし進捗を数で出せる処理（アップロード・書き出し）は、測れる限りプログレス表示にして終わりを見せる。

図鑑に横長のプログレスバー単体の見本は無いので、確定的な進捗の例として円形のドーナツ進捗を挙げた。複数手順の進みは stepper・progress-checklist を参照。