Flo.w

# Progress Ring

<flow-progress-ring>
Stable

The progress ring component display a circular 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 Ring

Add the indeterminate attribute to display an indeterminate progress ring.

# Colors

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

# Sizes

Use the size attribute to set the size of the ring.

# Properties

Property Description Type Default
autoShow
auto-show		 Set to `true` to automatically show the progress indicator when progress is between 0 and 1. boolean false
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 circular progress indicator. boolean false
size Specify the size of the circular progress indicator. "large" | "medium" | "small" | "x-large" | "xx-large" 'medium'
value Set to a value between 0 and 1 to indicate current progress. number 0

# CSS Custom Properties

Name Description
--background-color Background track color of the progress indicator (default: color-step-100)
--color Progress color of the progress indicator (default: primary)

← Radio Button →