Progress Bar¶
The Progress Bar widget draws one number as a filled bar between a minimum and a maximum. It gives visitors a quick sense of how far along something is or how full it is: storage used out of capacity, invoices paid out of invoices issued, or a project's completed tasks. The bar can change color as the value crosses thresholds you set.
See also Badge for a short status label and Generic Chart for several values at once.
Using it¶
Drop a Progress Bar onto the page or into a table row. Set Value to the number to show, and Minimum and Maximum to the range it sits in. Inside a row you can take all three from the record.
Value: {$record.used}
Maximum: {$record.capacity}Add a Text such as {$record.used} of {$record.capacity} to write the numbers over the bar. Then adjust the Thresholds so the bar turns amber and red where it matters for your data.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Value | A number, or a template that gives a number | 72 |
The value the bar shows. Required |
| Minimum / Maximum | Numbers or templates | 0 / 100 | The range the value sits in |
| Text | A template, for example {$record.used} of {$record.capacity} |
Empty | Optional text drawn over the bar |
| Thresholds | Ranges, each with From, Label and Color | Healthy (0) · Watch (60) · Critical (85) | Recolors the bar once the value reaches each range. Add more with Add Range |
| Variant | Theme variants | Default | Picks the widget's look from the theme. See Variants |
| Custom Style | CSS | Empty | Extra styling for the bar |
| Box Style | Sizing and spacing | Width 100% | The box around the bar |
Tips¶
A few things to keep in mind:
- Each threshold has a From value. The bar takes that range's color once the value reaches it. From values must be unique, and the list keeps itself sorted.
- The value must come out as a real number. A missing or non-numeric value leaves the bar empty.