Progress Bar Widget

👁 Display

The Progress Bar renders a horizontal or vertical fill bar based on a numeric value within a configured range. Use it for tank levels, download progress, task completion, or any bounded quantity.

Default size: 3 × 1 grid cells

---

Configuration

Property	Type	Default	Description
min	number	0	Value at 0% fill
max	number	100	Value at 100% fill
unit	string	%	Unit suffix shown
orientation	horizontal | vertical	horizontal	Bar direction
color	hex color	#6366F1	Fill color
showValue	boolean	true	Display numeric value inside bar
Device	device	—	The device to read from
Pin	V0–V255	—	The virtual pin to display
Label	string	—	Widget label

---

Firmware example

void loop() {
  Vwire.run();

  int waterLevel = analogRead(LEVEL_PIN) * 100 / 1023;  // 0–100%
  Vwire.virtualSend(V0, waterLevel);

  delay(5000);
}

---

Threshold colors

The bar color is fixed but you can update it dynamically by using a second widget (or by following a convention where your firmware sends a normalized value):

Fill %	Suggested color
0–25%	#EF4444 red (critically low)
25–75%	#F59E0B amber (normal)
75–100%	#10B981 green (full)

Multi-zone indication

For threshold-based coloring, combine a Progress Bar (level) with an LED or Icon Status widget (state) rather than trying to encode color in the value.

---

Vertical orientation

Use a taller cell (1×3 or 2×4) with orientation: vertical for a liquid-level style display — great for water reservoirs, fuel tanks, or battery visualization.