Progress bar

Who it’s for

Dashboard builders showing progress toward a known end — a batch part-way through, a fill level as a percentage, a task or job completion. The reader wants a fraction, and a bar is the shape everyone already reads as “this far along”.

What it does

The Progress bar draws a reading as a horizontal fill between a minimum and a maximum, with the value printed above it and the range ticks at each end. At the default 0–100 range a humidity reading of 62 fills just under two thirds of a 3×2 tile, with 0 and 100 marked so the scale is explicit.

• The most familiar shape for a fraction — no scale to learn and no needle to interpret.
• Range ticks at both ends keep the scale honest when it is not the obvious 0 to 100.
• The bar color can follow the value, so a bar close to its limit changes appearance without being read.
• Two layouts — the default with value and ticks, or a simplified bar for a dense board.
• Auto scale keeps the text proportional as the tile is resized.
• Units are converted, not just appended — the widget respects the unit set on the key and converts to the unit chosen on the widget.
• The Progress bar shows one current reading: it carries no history and no target marker, so a bar that needs a threshold line belongs on one of the gauge widgets with ticks.

How to set up

Data keys

The Progress bar takes one datasource, one entity and one data key.

Key	Role	Type	Description
humidity	The value the bar fills to	Timeseries	Numeric only. An attribute works equally well. The key’s own units and decimals override the widget-level ones.

Range

Setting	Default	Effect
Range min	0	The empty end of the bar
Range max	100	The full end of the bar
Range ticks	On	Prints both end values beneath the bar
Layout	Default	Default shows the value and ticks; Simplified shows the bar alone

Set the range to the real limits rather than leaving 0 to 100 in place when the value is not a percentage — the bar’s meaning is the fraction of that range, and a wrong maximum produces a confident but wrong fill.

How to customize

• To strip the tile down to the bar — set Layout to Simplified, which suits a dense board where the value is elsewhere.
• To make the bar change color as it fills — set the Bar color to a range instead of a constant.
• To show remaining headroom more clearly — set the Bar background color so the unfilled part is visible rather than blank.
• To keep text proportional at any tile size — leave Auto scale on; turn it off to pin an exact font size.
• To hide the end values — turn off Range ticks where the range is obvious from context.
• To restyle the number — set the Value font and color, which accepts ranges as well as a constant.

Tips

• Turn range ticks off only when the bar really is a percentage. On any other scale the ticks are the sole indication of what full means, and a bar without them invites everyone to assume 100.
• Give the bar color a range that changes at the value where someone has to act. A bar that is uniformly one color communicates the fraction but never the urgency, which is usually the reason the tile is on the dashboard.