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.

UI Samples using Progress Simple Kit

Get the full picture. See how this kit is used in our samples.

Available Props