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

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

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

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

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

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

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

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

ステップの状態

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

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

レイアウトと配置

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

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

ローダー

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

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

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