Progress

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

Example

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

Progress Example

Sizes

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.

Progress Sizes

Variants

Inkline includes multiple progress styles. You can change the style of a<i-progress> to set the background using the variant property.

Progress Variants

Bar Variants

Inkline includes multiple progress styles. You can change the style of a <i-progress-bar> to set the bar color using the variant property.

Progress Bar Variants

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%.

Progress Value

Stacked Bars

You can add multiple <i-progress-bar> inside the <i-progress> component to stack them, adding them up to a 100% percentage.

Stacked Progress Bars Example

API

Progress API <i-progress>
Property Description Type Accepted Default
size Sets the size of the progress component. String sm, md, lg md
variant Sets the color variant of the progress component. String light, dark light
Progress Bar API <i-progress-bar>
Property Description Type Accepted Default
value The current value based on which the progress percentage is calculated. Number 0
min The minimum / initial number based on which the progress percentage is calculated. Number 0
max The maximum / initial number based on which the progress percentage is calculated. Number 100
variant Sets the color variant of the button component. String primary, secondary, light, dark, success, danger, warning, info primary