プログレスインジケーター（概要）｜デジタル庁デザインシステムβ版

プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。データ取得リクエストの応答を待っていることをユーザーに伝えたいといった要求に対応します。

ユースケース

画面全体が読み込み待ちのとき: 円形が回転するサークルタイプ、または横棒が動くリニアタイプを使います。読み込み中というラベルや、進捗状況をテキストで表示することができます。
画面の一部だけが処理中であるとき: アニメーションしない砂時計タイプを使います。

画面の一部だけが処理中の場合はサークルタイプやリニアタイプを使わない: 画面の一部分が動き続けて他の部分に注視できなくなる状況を避けるため、サークルタイプとリニアタイプは画面全体が処理中の場合にのみ使用してください。画面の一部だけが処理中の場合は、アニメーションしない砂時計タイプを使用してください。
スケルトンUIの代わりにプログレスインジケーターを使う: ロード待ちの画面で、レイアウトの骨格だけを先に見せる、いわゆるスケルトンUIは使用しないでください。複数のデータを待つ画面でも、処理中であることはプログレスインジケーターで示します。
手続き全体の進行状況を示す場合はステップナビゲーションを使う: リニアタイプの見た目は手続き全体の進み具合を連想させますが、プログレスインジケーターは処理中の一時的な待機状態を示すためのコンポーネントです。申請手続きや登録フローなど、複数のステップからなる手続き全体の現在位置と流れを提示する場合は、ステップナビゲーションを使用してください。