# Progress bar

The progress bar component is a graphical element in a user interface that visually indicates the progress of an operation. 

This component is a horizontal track that fills up incrementally as a task, such as a file download or installation process, advances towards completion. 

### :point\_right: The tag

To insert a progress bar into your interface, use the following tag format:

```
[component:progress-bar:<min>:<max>:<step>:<value>]
```

**📍 Where to add the tag:** A rectangle layer.

Replace `<min>`, `<max>`, `<step>`, and `<value>` with your desired numerical values:

* `<min>` is the minimum value the slider can represent.
* `<max>` is the maximum value the slider can represent.
* `<step>` is the incremental value between the range.
* `<value>` is the current value of the slider.

Example usage:

```
[component:progress-bar:0:100:5:25]
```

This creates a progress bar that ranges from 0 to 100, moves in increments of 5, and has an current value of 25.

### :art: **Customize its style**

To enhance the visual appeal of your slider control, apply custom styling. Here are the tags you can use to define the style:

* **Background Color:** `[style:bg-color:#HEXCODE]` - This sets the background color of the slider track. Replace `#HEXCODE` with the 6-digits hex color code of your choice.
* **Active Color:** `[style:active-color:#HEXCODE]` - This changes the color of the active portion of the slider (from the minimum value to the current thumb position). Replace `#HEXCODE` with your preferred  6-digits hex color code.

For example:

```
[style:bg-color:#42476ee]    // Sets the background color of the slider track to dark blue.
[style:active-color:#d9d9d9]    // Changes the active portion of the slider to a light grey.
```

Incorporate these style tags in your code to customize the look of your input slider to match your interface design.

### :label: How to add the tag

In order to successfully integrate an progress bar component into your app, follow these steps:

1. Draw a rectangle on your design canvas to represent the progress bar. We recommend a **minimum height of 32px** at least.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F8lLhoiVUS6dVYW89169R%2FProgress%20bar1.jpg?alt=media&#x26;token=bae2e619-b887-45b2-91ab-b703d452102f" alt=""><figcaption></figcaption></figure>

2. Incorporate the following tag into the rectangle to embed the progress bar functionality:

```
[component:progress-bar:0:100:5:25]
```

3. To customize the progress bar's appearance, add these style tags directly after the progress bar component tag:

```
[style:bg-color:#42476e][style:active-color:#d9d9d9]
```

### Binding with your API

1. Ensure your [GET API request](https://docs.bravostudio.app/connect-api/set-up-api-requests/creating-an-api-collection/airtable/set-up-an-api-get-request-for-list-page-airtable) is properly set up.
2. From the left side of the screen, under the Elements section, select the progress bar, or directly tap on the progress bar image displayed in the center of the screen.
3. Navigate to the Form Data section on the right, choose your API collection, and then select either the GET request. Finally, specify the variable you wish to connect.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FHoFBWRokwYS7fOIRYiq4%2FProgress%20bar2.jpg?alt=media&#x26;token=47f40401-0f1f-4bb0-a963-bdf4afab4f9f" alt=""><figcaption></figcaption></figure>

4. You're now set! Try and test your app with [Bravo Vision](https://docs.bravostudio.app/good-to-know/faq/bravo-vision)! :tada:

### :floppy\_disk: Example design file

{% @figma/embed fileId="K0sbGGhbqYH8iLAZRV22Bt" nodeId="569:2" url="<https://www.figma.com/file/K0sbGGhbqYH8iLAZRV22Bt/Progress-bar?mode=design&node-id=569-2&t=h1gdgSLuO9cAy&type=design>" %}

Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the [community](https://community.bravostudio.app/home).


---

# Agent Instructions: 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:

```
GET https://docs.bravostudio.app/bravo-tags/components/progress-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.