Progress ui-progress

Displays a visual progress bar to show completion status or ongoing processes on your dashboard.

Properties

Prop	Dynamic	Description
Group		Defines which group of the UI Dashboard this widget will render in.
Size		Controls the width of the progress bar with respect to the parent group. Maximum value is the width of the group.
Label	✓	The text shown alongside the progress percentage. If provided, displays as "Label: XX%" within the progress bar.
Color	✓	Color for the progress bar, valid values include Vuetify theme colors (primary, secondary, success, error, warning, info) or custom colors (green,
Class		Optional CSS class names to apply to the progress bar for custom styling.

Dynamic Properties

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures	Example Values
Label	msg.ui_update.label	String
Color	msg.ui_update.color	String

Controls

msg.	Example	Description
enabled	true | false	Allow control over whether or not the progress bar updates are processed.

Input

The progress bar accepts numeric values via msg.payload:

• Payload Type: Number (0-100)
• Description: Represents the completion percentage. Values are automatically clamped to the 0-100 range.
• Example: msg.payload = 75 displays a 75% complete progress bar

Example

Basic Progress Bar

Example of a rendered progress bar in a Dashboard showing 79% completion.

Dynamic Updates

The progress bar can be updated in real-time by sending messages with numeric payloads. You can also dynamically change the label and color:

// Update progress to 80%
msg.payload = 80;
return msg;

// Update progress and change label/color
msg.payload = 45;
msg.ui_update = {
    label: "Loading Data",
    color: "warning"
};
return msg;

The progress bar is commonly used for:

• File upload/download progress
• Task completion status
• Data processing indicators
• System health metrics
• Battery level displays