---
title: "プログレスインジケーターとローダー"
description: "フローのステップ進行状態とビジー状態を表示します。"
---

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

### インジケーターのスタイル \{#indicator-styles\}

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

- **Linear** — ユーザーが進むにつれて塗りつぶされる1本のバー。
- **Segmented** — 各ステップを表す個別のバーが順番に塗りつぶされていく。
- **Connectors** — 線でつながれたラベル付きの円（例：Step 1、Step 2、Step 3 の順序）。
### ステップとスクリーンの対応を設定する \{#match-steps-to-screens\}

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

ステップ数をより細かく制御したい場合は、**One segment per screen** をオフにしてください。
:::warning
ステップの位置は、ユーザーが実際に見る順番ではなく、画面リストに従って決まります。非線形フローでは、インジケーターに表示されるステップが先に進んだり戻ったりすることがあります。
:::
### ステップの状態 \{#step-states\}

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

1つのステップを編集すると、同じインジケーター内のすべてのステップに影響します。
### レイアウトと配置 \{#layout-and-positioning\}

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

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

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

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

- **Spinner** — 円形のスピナー。
- **Spinner with label** — キャプション付きの円形スピナー（例：「読み込み中...」）。
- **Loader** — 処理の進行に合わせて塗りつぶされる横バー。
{/* - **Loader with label** — A horizontal bar with a caption and percentage (e.g., "Analyzing... 47%"). */}
:::warning
ローダーを表示・非表示にするには**トリガー**が必要です。**Interactions**タブを開いてロジックを設定してください。たとえば、ユーザーがクイズを送信した後に表示するなどが可能です。
:::