The Progress Bar widget is useful for creating health bars, progress towards goals, and so on.

The “Progress” control determines how full the bar is, where 0.0 is empty, and 1.0 is full; in the example image above, Progress is set to 0.25 and the Bar Color is set to blue, so 25% of the bar is blue. Standard text controls are provided to add text over the bar.

By default, the size of the bar will be determined by its text. If you’d like your bar to extend past the text, you will likely want to add a layout box and set an “Override Width” value, as shown in the screenshot above. (See: Borders and Layout Boxes).

Scripting a Progress Bar

To set the value of your progress bar, you’ll want to use the .setProgress() method, specifying a value between 0 and 1 within the parentheses, as shown in this simple script example:

For another example, you can take a look at the Health Bar in the UI Library.

For details on how to script UI, see Adding Scripts to UI.