Bubble Docs
Search…
Progress Bar
The Progress Bar Plugin creates an element that displays a progress bar that shows the user what percentage of a task is completed.

Progress Bar

Percentage

Enter the status bar's percentage to show its completion. The range is from 0 to 100%.

Progress bar color

Select the color for the progress bar's indicator.

Animate progress

Select this option to smoothly animate the progress bar as it updates.
Note: This is not supported on IE9 and older.

Setup

You can use progress bars to show the completion status of a task. If we have a field of type "number" on an example task, then we can set this equal to our percentage.
​
​
We might choose to change the color of our progress bar based on how close to completion this particular task is. Let's say that if this task is more than 75% complete, we want to show the progress bar as green.
​
​
Our first Example task is 85% complete, so in run mode, we can see that percentage displayed across the progress bar and its color updated to match.
​
​

FAQ

(Have a suggested FAQ to help other Bubblers? Please email us at [email protected]!)
​
Last modified 8mo ago