Flo.w

# Progress Bar

<flow-progress-bar>
Stable

The progress bar component display a linear progress indicator.

Set the value property of the progress ring to a value between 0 and 1 to set the displayed progress. Progress changes are animated.

# Examples

# Indeterminate Progress Bar

Add the indeterminate attribute to display an indeterminate progress bar.

# Colors

Use the color attribute to set the bar's color from the application palette.

# Sizing the Progress Bar

Use CSS styling to set the width of the bar.

# Properties

Property Description Type Default
color The color of the progress indicator. Colors are taken from the application palette. "danger" | "gray" | "primary" | "secondary" | "success" | "warning"
indeterminate Set to `true` to show an indeterminate progress bar. boolean false
value Set to a value between 0 and 1 to indicate current progress. number 0

# CSS Custom Properties

Name Description
--background-color Background color of the progress bar (default: color-step-100)
--color Indicator color of the progress bar (default: primary)

← Progress Ring →