Progress Simple

Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.

Default


Setting Values


Within a Flex


When rendering a Progress Simple through within a Flex container, you must pass flex="1" to the kit itself so that it fills the available space

Progress Bar Width


Variants


Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default, positive, negative, and warning, respectively.

Muted


Align



Things to Avoid

Do not use as turbolinks bar.

Available Props