# Progress Bar

{% tabs %}
{% tab title="In-Depth Guide" %}
![](/files/-MDr7fBMlyN9kfvF5Nd_)

First, make sure you've installed the progress bar component from the Adalo Marketplace, then click the plus button in the left panel, find the progress bar component and drag it on to a screen in your app.

For the progress bar component, you can drag to adjust its width and height.

In the left panel, you can set the following properties:

* Progress Value
  * If your were using this for a To Do list app, you would use Magic Text to set the value to be Logged In User > Tasks > Count, and then click the magic text chip to add a filter to only count Tasks where Completed? was True
* Maximum Value
  * This is the value of the progress bar when it is complete, this could be a static number like 10 or you can also us magic text to set this value such as Logged in User > Tasks > Count
* Color
  * This color represents the Progress Value
* Background Color
  * This color is for the part of the progress bar that is not yet complete
    {% endtab %}
    {% endtabs %}

## Help

If you need additional help with this article, you can always ask in our [community forum](https://forum.adalo.com/)! Be sure to paste the link to this article in your post as well!


---

# 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://help.adalo.com/component-basics/marketplace-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.