Skip to main content
Progress bars show how far along a process is. They fill from left to right as value approaches max.

​
Basic Usage

​
Custom Max

By default max is 100, but you can set it to any positive number. The renderer normalizes the value to a percentage automatically.

​
Custom Colors

Use indicator_class to change the progress bar color:

​
Dynamic Progress with Labels

Bind a slider to a progress bar so the label reflects the actual value. The percent format specifier turns a raw fraction into a readable percentage:

​
API Reference

Progress Parameters

​
value
float
default:"0"
Current progress value.
​
max
float
default:"100"
Maximum value. The renderer normalizes value / max to a 0–100 percentage.
​
indicator_class
str | None
default:"None"
Tailwind classes for the indicator bar (e.g. "bg-green-500"). Overrides the default primary color.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Progress
{
  "type": "Progress",
  "value?": "number | string",
  "max?": 100,
  "indicatorClass?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Progress.