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

**Progress** カテゴリには、マルチスクリーンフローのステップ進行を示すものと、処理中を示すインジケーターの2種類の要素があります。

## プログレスインジケーター \{#progress-indicators\}

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

**Progress** 要素は、マルチスクリーンフロー内でのユーザーの位置を示します。カテゴリには3つの表示バリアントがあります：

- **Linear** — ユーザーが進むにつれて伸びる1本のバー。
- **Segmented** — ステップごとに順番に埋まる個別のバー。
- **Connectors** — 線でつながったラベル付きの円（例：ステップ1、ステップ2、ステップ3の順）。

### スクリーンとステップの対応付け \{#match-steps-to-screens\}

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

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

:::warning
ステップの位置はスクリーンリストに基づいており、ユーザーが実際に見る順序ではありません。非線形フローでは、インジケーターの表示ステップが飛んだり戻ったりすることがあります。
:::

### ステップの状態 \{#step-states\}

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

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

## ローダー \{#loaders\}

**Loader** は処理中であることを示すアニメーション要素です。たとえば、パーソナライズされたプランを準備するためにユーザーのクイズ回答を処理している場面などで使用します。

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

- **Spinner** — 円形のスピナー。
- **Spinner with label** — キャプション付きの円形スピナー（例：「読み込み中...」）。
- **Loader** — 処理の進行に合わせて伸びる横方向のバー。
{/* - **Loader with label** — A horizontal bar with a caption and percentage (e.g., "Analyzing... 47%"). */}

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