> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-progress-bar.md).

# AX - プログレスバー

## 概要

**AX - プログレスバー** は、Experience Sites ページで完了率や目標達成状況を示す視覚的な進捗インジケーターを表示する Experience Cloud コンポーネントです。

ポータルユーザーに、目標に向けた進捗、複数ステップのプロセスの完了状況、要件充足率、または Salesforce データからの任意の数値進捗指標を表示するために使用します。進捗値、ラベル、色、スタイルは Experience Builder で設定します。

オンボーディングの完了、目標の追跡、プロフィールの完成度、トレーニングの進捗など、またはポータルユーザーが目標に向けた進捗を視覚的に把握したいあらゆる場面に最適です。

## 設定

### プロパティ

**ラベル** は、プログレスバーの目的を示すために表示されるテキストで、どの進捗を示しているのかをユーザーに明確に伝えます。

**値** は、現在の進捗を表す数値です。つまり、完了したタスクまたはプロセスの割合や分数です。 **合計** は、100% の進捗に達するために到達すべき数値です（既定値は 100）。

**値ラベル** は、値の横に表示されるラベルで、多くの場合パーセンテージや割合として、進捗をテキストで表します。 **値の位置** バーに対して次の位置に配置します： `右上`, `左`, `右`, `左上`, `右下`、または `左下`.

**サイズ** プログレスバーの太さを設定します： `フル`, `極小`, `小`, `中`、または `大`.

**向き** バーが塗りつぶされる方向を設定します — `水平` または `垂直` — 周囲のコンテンツの流れに合わせます。

**値を表示** 進捗値ラベルの表示を切り替え、数値の進捗をバー上に直接表示するか、デザインをすっきりとミニマルに保つかを選べます。

**バリアント** プログレスバーの形状を設定します： `ベース` 直線のバーの場合は `円形` 円形インジケーターの場合は

**テクスチャ付き** プログレスバーにテクスチャ効果を加え、より動的で触感的な見た目にします。

**テーマ** 進捗の性質や状態を示す、あらかじめ定義されたカラーテーマを適用します： `ベース`, `代替反転`, `エラー`, `情報`, `反転`, `オフライン`, `成功`、または `警告` — たとえば、 `成功` 完了したタスクには、または `警告` 保留中のアクションには。

**太さ** プログレスバーの太さを調整します： `中`, `極小`, `小`、または `大`.

**代替テキスト** スクリーンリーダー向けにプログレスバーを説明するアクセシブルなテキストを提供します。

## スタイリング

{% tabs %}
{% tab title="マージン" %}
プログレスバーの外側の余白を制御します。
{% endtab %}

{% tab title="パディング" %}
プログレスバーの内側の余白を制御します。
{% endtab %}

{% tab title="ラベル" %}

* **色 / フォントサイズ / フォントスタイル / フォントウェイト：** ラベルテキストのスタイルを設定します。
  {% endtab %}

{% tab title="値" %}

* **色 / フォントサイズ / フォントスタイル / フォントウェイト：** 値テキストのスタイルを設定します。
  {% endtab %}

{% tab title="テーマカラー" %}
各テーマ（**ベース**, **代替反転**, **エラー**, **情報**, **反転**, **オフライン**, **成功**, **警告**）には次が含まれます：

* **色：** トラックの色。
* **完了色：** 塗りつぶされた／完了済み部分の色。
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-progress-bar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.