Progress

A custom component for displaying progress with support for stacked progress bars.

Progress components are built with two components: a wrapper <IProgress> and at least one <IProgressBar>. You can set the width of a progress bar by setting its value property.

Color Variants

Inkline includes multiple progress styles. You set the wrapper <IProgress> background using the color property.

More importantly, you can change the color of an <IProgressBar> using the color property.

Size Variants

You're able to use the size modifier to control the size of your progress, using one of the available sizes: sm, md, and lg. The default size is set to md.

Value

Inkline allows you to set a min and max modifier to calculate the progress based on a meaningful value. The new min will represent 0% and the max will represent 100%.

Stacked Bars

You can add multiple <IProgressBar> inside the <IProgress> component to stack them, adding them up to 100%.

Props

IProgress
IProgressBar

Slots

IProgress
IProgressBar

Design Tokens

IProgress
IProgressBar