> 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 で設定できます。

オンボーディングの完了、目標の追跡、プロフィールの充実度、トレーニングの進捗、またはポータルのユーザーに目標に向けた進み具合を視覚的にフィードバックする必要があるあらゆる場面に最適です。

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

<table><thead><tr><th>名前</th><th width="202">説明</th><th>使用方法</th></tr></thead><tbody><tr><td><strong>ラベル</strong></td><td>プログレスバーの目的を示すために表示されるテキスト。</td><td>このプロパティを実装して、バーが何の進捗を示しているのかをユーザーが明確に理解できるようにします。</td></tr><tr><td><h4>値</h4></td><td>現在の進捗を表す数値。</td><td>このプロパティを設定して、完了したタスクまたはプロセスの割合や比率を反映させます。</td></tr><tr><td><strong>値ラベル</strong></td><td>値の横に表示されるラベルで、多くの場合はパーセンテージや比率として表示されます。</td><td>進捗値をテキストで表現し、ユーザーにわかりやすく伝えるために使用します。</td></tr><tr><td><strong>値の位置</strong></td><td>プログレスバーに対する値ラベルの位置。オプションは次のとおりです <code>右上</code>, <code>左</code>, <code>右</code>, <code>左上</code>, <code>右下</code>、および <code>左下</code>.</td><td>読みやすさを高め、周囲のコンテンツのデザインに合う値の位置を選択します。</td></tr><tr><td><strong>サイズ</strong></td><td>プログレスバーの太さ。オプションは次のとおりです <code>フル</code>, <code>極小</code>, <code>小</code>, <code>中</code>、および <code>大</code>.</td><td>プログレスバーが目立ち、全体のデザインレイアウトと調和するサイズを選択します。</td></tr><tr><td><strong>向き</strong></td><td>プログレスバーが塗りつぶされる方向。次のように設定できます <code>水平</code> または <code>垂直</code>.</td><td>レイアウトやコンテンツの流れの方向に合わせて向きを調整し、直感的に進捗を可視化します。</td></tr><tr><td><strong>値を表示</strong></td><td>進捗値ラベルを表示または非表示に切り替えるトグル。</td><td>この設定を使用して、ユーザーの参照用に数値の進捗をバー上に直接表示するか、デザインをすっきりとシンプルに保つかを選べます。</td></tr><tr><td><strong>バリアント</strong></td><td>プログレスバーの形状。オプションは次のとおりです <code>ベース</code> 直線バー用、または <code>円形</code> 円形の進捗インジケーター用。</td><td>サイトのデザインモチーフと表示する進捗の種類に最も適したバリアントを選択します。</td></tr><tr><td><strong>テクスチャ付き</strong></td><td>プログレスバーにテクスチャ効果を追加して、視覚的なディテールを高めます。</td><td>このプロパティを適用して、プログレスバーにより動的で触感的な外観を作成します。</td></tr><tr><td><strong>テーマ</strong></td><td>進捗の性質や状態を示す事前定義済みのカラーテーマ。使用可能なテーマは次のとおりです <code>ベース</code>, <code>反転代替</code>, <code>エラー</code>, <code>情報</code>, <code>反転</code>, <code>オフライン</code>, <code>成功</code>、および <code>警告</code>.</td><td>さまざまな意味を伝えるためのテーマを選択します。たとえば、次を使用します <code>成功</code> 完了したタスクには <code>警告</code> 保留中のアクションには</td></tr><tr><td><strong>太さ</strong></td><td>プログレスバーの太さを調整します。オプションは次のとおりです <code>中</code>, <code>極小</code>, <code>小</code>、および <code>大</code>.</td><td>プログレスバーの存在感と他のサイト要素との美的な互換性が確保される太さを選択します。</td></tr></tbody></table>
{% 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.