Progress Bar

Display progress to a user such as number of tasks completed.

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