Progress Bar

Progress bars have been added to create visually appealing Anvil components where you can customize the colors and the contents of the progress bar. The only property of the progress bar is the progress_bar_number which is used to make a unique id for each progress bar, so they can be used together on the same form. The most important part of a progress bar is that you need to call the Javascript functions after you have added the progress bar component to the form.

Adding the progress bar value

The bar value is a percentage, so whichever value you are going to add it's best to convert to a number between 0 and 100. You can call this Javascript function via set_progress_bar_value and it takes two parameters:

  • progress_bar_number - to identify which progress bar is being referenced.

  • bar_value - the value which the bar is going to display (from 0 to 100).

Adding the progress bar color

You can call this Javascript function via set_progress_bar_color and it takes two parameters:

  • progress_bar_number - to identify which progress bar is being referenced.

  • color - the color which you want to assign to the bar in hex format.

Last updated