プログレスインジケーターとローダー

Progress カテゴリには、マルチスクリーンフローのステップ進行を示すタイプと、その場でビジー状態を示すタイプの2種類の要素があります。

プログレスインジケーター

インジケーターのスタイル

Progress 要素は、複数画面のフローにおけるユーザーの現在位置を示します。このカテゴリには3つの視覚的なバリアントがあります：

Linear — ユーザーが進むにつれて塗りつぶされる1本のバー。
Segmented — 各ステップを表す個別のバーが順番に塗りつぶされていく。
Connectors — 線でつながれたラベル付きの円（例：Step 1、Step 2、Step 3 の順序）。

ステップとスクリーンの対応を設定する

Progress indicator settings panel with variant picker, One segment per screen toggle, and Screens dropdown

デフォルトでは、プログレスインジケーターはフロー内のすべてのスクリーンをトラッキングします。特定のスクリーンのみに限定したい場合は、Screens ドロップダウンから選択してください。または、除外したいスクリーンを開き、Include screen in progress indicator チェックボックスのチェックを外してください。

ステップ数をより細かく制御したい場合は、One segment per screen をオフにしてください。

ステップの位置は、ユーザーが実際に見る順番ではなく、画面リストに従って決まります。非線形フローでは、インジケーターに表示されるステップが先に進んだり戻ったりすることがあります。

ステップの状態

ID、Screens、Completed/Current/Upcoming状態タブを含むステップレベルの設定パネル

各ステップには Completed、Current、Upcoming の3つの状態があります。Progress Indicator 内のステップを選択すると、右パネルで状態のスタイルを編集できます。Apply changes to all states を使用すると、編集内容を他の2つの状態にコピーできます。

1つのステップを編集すると、同じインジケーター内のすべてのステップに影響します。

レイアウトと配置

プログレスインジケーターはグローバル要素のため、コンテナの内側に配置することはできません。また、位置の設定も不可で、デフォルトで絶対配置が使用されます。ユーザーが画面をスクロールしても、インジケーターは固定されたまま、コンテンツがその下でスクロールします。

インジケーター周囲のスペースを調整するには、要素を移動するのではなく、Spacing セクションの Margin および Padding コントロールを使用してください。レイアウトがずれて見える場合は、インジケーターと隣接する要素の両方でマージンまたはパディングを調整してください。

ローダー

ローダーは、処理が進行中であることを示すアニメーション要素です。たとえば、パーソナライズされたプランを作成するためにクイズの回答を処理している場合などに使用します。

このカテゴリには3つのテンプレートがあります。

Spinner — 円形のスピナー。
Spinner with label — キャプション付きの円形スピナー（例：「読み込み中…」）。
Loader — 処理の進行に合わせて塗りつぶされる横バー。

ローダーを表示・非表示にするにはトリガーが必要です。Interactionsタブを開いてロジックを設定してください。たとえば、ユーザーがクイズを送信した後に表示するなどが可能です。