Progress Bar

A solid fill progress bar with animated transitions. Supports horizontal and vertical orientations, alert zone bands, zone legends, and min/max labels.

Playground

info

onZoneChange callbacks work in your local project but not in this interactive playground due to how the editor re-renders components.

Props

Prop	Type	Default	Description
data	RelayDataPoint	—	Required. { value, timestamp, isLoading?, error? }
min	number	0	Minimum value
max	number	100	Maximum value
orientation	string	"horizontal"	"horizontal" or "vertical"
showLabel	boolean	true	Show value label on the fill bar
formatValue	function	—	Custom value formatter: (value) => string
alertZones	AlertZone[]	—	Color zones as background bands (15% opacity)
showAlertZones	boolean	true	Show zone bands behind the fill
showZoneLegend	boolean	false	Show zone legend below the bar
showZoneValues	boolean	false	Show boundary values on zone edges
showMinMax	boolean	false	Show min/max labels at bar ends
styles	object	—	Custom styling — see Styles
showLastUpdated	boolean	false	Show the timestamp from data.timestamp
formatTimestamp	function	—	Custom timestamp formatter: (ts) => string
showLoading	boolean	true	Show skeleton shimmer while loading
onZoneChange	function	—	Called when value enters a new zone — see onZoneChange
onError	function	—	Called on invalid data — see onError

Label Color

The label on the fill bar automatically switches color for readability:

• White when the fill exceeds 50% of the bar width
• Current text color when below 50%

---

Styles

styles={{
  label_font_file: { fontSize: 14, fontWeight: 600, color: "#fff", fontFile: "/fonts/Custom.woff2" },
  lastUpdated: { fontSize: 10, color: "#94a3b8" },
  zoneValue: { fontSize: 10, color: "#6b7280" },
  background: { color: "#f1f5f9" },
  width: 400,
  height: 28,
}}

Field	Applies to	Properties
label_font_file	The value label on the bar	fontFamily, fontSize, fontWeight, color, fontFile
lastUpdated	Timestamp text	fontFamily, fontSize, fontWeight, color, fontFile
zoneValue	Zone boundary labels	fontFamily, fontSize, fontWeight, color, fontFile
background	Component background	color

Field	Type	Default	Description
width	string | number	—	Fixed width override
height	string | number	24px	Bar height

---

With Hooks

import { useRelayLatest, ProgressBar } from "@relay-x/ui";

function BatteryBar() {
  const latest = useRelayLatest({
    deviceIdent: "sensor_01",
    metric: "battery",
    timeRange: { start: Date.now() - 86400000, end: Date.now() },
  });

  return <ProgressBar data={latest} min={0} max={100} showLabel showMinMax />;
}