Progress Ring

A determinate progress indicator (circular ring or linear bar). Read-only.

Type

"progressRing"

Relevant Fields

Inherits all Control Definition. Key fields:

Field Type Default Description
min number 0 Minimum value (0%)
max number 100 Maximum value (100%)
progressStyle string "ring" "ring" (circular) or "bar" (linear)
tint string "#667eea" Fill color
label string — Center text (ring) or header text (bar)
icon string — SF Symbol in center (ring only)

Styles

"ring" (default)

Circular progress ring with percentage and optional label/icon in the center. Square aspect ratio.

"bar"

Linear progress bar (thin horizontal bar). Header shows label and percentage.

Examples

Circular download progress

{
  "type": "progressRing",
  "id": "download-progress",
  "position": [0, 0],
  "min": 0,
  "max": 100,
  "progressStyle": "ring",
  "tint": "#34C759",
  "label": "Download",
  "icon": "arrow.down.circle",
  "sync": [{ "method": "meshsocket", "type": "listen", "event": "broadcast", "filter": { "task": "firmware_update" }, "valuePath": "percent" }]
}

Linear bar (washer cycle)

{
  "type": "progressRing",
  "id": "washer-cycle",
  "position": [2, 0],
  "span": [1, 4],
  "min": 0,
  "max": 90,
  "progressStyle": "bar",
  "tint": "#5AC8FA",
  "label": "Washer Cycle (min)",
  "sync": [{ "method": "meshsocket", "type": "listen", "event": "broadcast", "filter": { "device": "washer" }, "valuePath": "elapsed_minutes" }]
}

Behavior

  • Progress animates smoothly between value updates
  • Percentage is calculated as (value - min) / (max - min) * 100
  • No action — display only