# 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. 

![](https://34394582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5sbzwG7CljeZdkntrL%2F-MZZBV9yRCpgOns_ShuP%2F-MZZEWLW7j_EUQW8qg3w%2FScreen%20Shot%202021-04-30%20at%203.24.26%20PM.png?alt=media\&token=261aae5e-78a6-411a-8e27-284bcf6e4060)

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.

![](https://34394582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5sbzwG7CljeZdkntrL%2F-MZZBV9yRCpgOns_ShuP%2F-MZZEYrTNI9Hiz6QcxlB%2FScreen%20Shot%202021-04-30%20at%203.24.34%20PM.png?alt=media\&token=fde85b23-0fe0-46e1-9aaf-d163ed47a62a)

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. 

![](https://34394582-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5sbzwG7CljeZdkntrL%2F-MZZBV9yRCpgOns_ShuP%2F-MZZEalhXBqjYqRiy6dw%2FScreen%20Shot%202021-04-30%20at%203.25.02%20PM.png?alt=media\&token=326cd98b-5404-4017-a53c-ad05d07881bc)

## FAQ

(Have a suggested FAQ to help other Bubblers? Please visit our [Support center](https://bubble.io/support) to get in touch with a member of our Support team!)