> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/global-widgets/progress-bar.md).

# Progress Bar

Shows a progress bar based on a certain value between the provided minimum and maximum value.

<figure><img src="/files/bEavFrpS4SDZgVsYPxg2" alt=""><figcaption></figcaption></figure>

### Properties&#x20;

| Property | Datatype           | Description                                                                                                                                                                                                                                                                                                      |
| -------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Minimum  | Number, Expression | The minimum value displayed on the progress bar. Any value below the minimum value are not visible on the progress bar, it will show an empty progress bar.                                                                                                                                                      |
| Maximum  | Number, Expression | The maximum value displayed on the progress bar. Any value above this value will show a full progress bar.                                                                                                                                                                                                       |
| Value    | Number, Expression | Displays the current progress of the progress bar. The current value should be a value between or equal to the minimum and maximum value. The value or current progress is in proportion to the minimum and maximum value and will be displayed on the progress bar.                                             |
| Unit     | Text, Expression   | This property displays a label immediately after the value on the progress bar. The property 'Value \<number, expression>' can represent a certain unit, this can for example be a percentage or the number of completed steps. Example 1 shows the label " of 100". Examples 2 and 3 are showing the label "%". |

### Appearance

| Property   | Datatype            | Description                                                                                                                                                           |
| ---------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bar color  | Text, Expression    | Changes the background color of the progress bar using a bootstrap color context. Accepted values: "default", "primary", "success", "info", "warning" and "danger".   |
| Striped    | Boolean, Expression | *When true:* adds oblique thick stripes to the progress bar. View examples 2 and 3 to see a striped progress bar.                                                     |
| Animate    | Boolean, Expression | *When true:* the stripes of a progress bar are animated as shown in example 3. Note: this property only works when 'Striped \<boolean, expression>' is set to 'true'. |
| Font size  | Number              | The font size of the current value and unit label in pixels.                                                                                                          |
| Bar height | Number              | The height of the bar in pixels.                                                                                                                                      |


---

# 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.wem.io/platform/wemtipsandtricks/widgets/global-widgets/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.