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

​
Range

By default max is 100 and min is 0, but you can set either to define a custom range. The renderer normalizes the value to a percentage automatically. Set max for step-style counting, or use both min and max when the range doesn’t start at zero.

​
Variants

Semantic variants color the progress bar to communicate meaning at a glance:

​
Sizes

Control the bar thickness with size. The default is a medium weight suitable for most layouts; use sm for compact spaces and lg for dashboard-style data displays:

​
Custom Colors

Use indicator_class for arbitrary colors beyond the built-in variants:

​
Target Marker

The target prop renders a vertical marker line on the bar at a specific position, so you can compare actual progress against a goal. Set max to the ceiling of the gauge so both value and target land at meaningful positions. Use target_class to style the marker.

​
Vertical Orientation

Set orientation="vertical" for vertical progress bars. The default height is set by the theme — wrap in a sized container for custom heights:

​
Dynamic Progress with Labels

Bind a slider to a progress bar so the label reflects the actual value. Forward-declare the reactive reference with a lambda so it can be used before the slider appears in the tree:

​
API Reference

Progress Parameters

​
value
float | str
default:"0"
Current progress value. Can be a template expression for dynamic binding.
​
min
float
default:"0"
Minimum value. The renderer normalizes (value - min) / (max - min) to a 0–100 percentage.
​
max
float
default:"100"
Maximum value.
​
variant
str
default:"default"
Visual variant: "default", "success", "warning", "destructive", "info", "muted".
​
size
str
default:"default"
Bar thickness: "sm" (4px), "default" (6px), "lg" (10px).
​
target
float | str | None
default:"None"
Target marker position on the bar. Renders a vertical line at this value within the min/max range. Can be a template expression for dynamic binding.
​
indicator_class
str | None
default:"None"
Tailwind classes for the indicator fill bar. Overrides variant coloring.
​
target_class
str | None
default:"None"
Tailwind classes for the target marker line.
​
orientation
str
default:"horizontal"
Layout direction: "horizontal" or "vertical".
​
css_class
str | None
default:"None"
Tailwind classes for the track (outer container).

​
Protocol Reference

Progress
{
  "type": "Progress",
  "value?": "number | string",
  "min?": 0,
  "max?": 100,
  "variant?": "default | success | warning | destructive | info | muted",
  "size?": "sm | default | lg",
  "target?": "number | string",
  "indicatorClass?": "string",
  "targetClass?": "string",
  "orientation?": "horizontal | vertical",
  "cssClass?": "string"
}
For the complete protocol schema, see Progress.