Progress

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

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

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.

HTML

<i-progress size="sm">
    <i-progress-bar :value="65" />
</i-progress>

<i-progress size="md">
    <i-progress-bar :value="65" />
</i-progress>

<i-progress size="lg">
    <i-progress-bar :value="65" />
</i-progress>

Color Variants

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

More importantly, you can change the color of an <i-progress-bar> using the color property.

HTML

<i-progress>
    <i-progress-bar color="primary" :value="65" />
</i-progress>

<i-progress>
    <i-progress-bar color="secondary" :value="65" />
</i-progress>

<i-progress>
    <i-progress-bar color="info" :value="65" />
</i-progress>

<i-progress>
    <i-progress-bar color="success" :value="65" />
</i-progress>

<i-progress>
    <i-progress-bar color="warning" :value="65" />
</i-progress>

<i-progress>
    <i-progress-bar color="danger" :value="65" />
</i-progress>

<i-progress color="light">
    <i-progress-bar color="dark" :value="65" />
</i-progress>

<i-progress color="dark">
    <i-progress-bar color="light" :value="65" />
</i-progress>

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 <i-progress-bar> inside the <i-progress> component to stack them, adding them up to 100%.

Configuration

Props

Use props to modify the component’s design and behavior.

Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the progress component
Property
min
TypeNumber
Default0
Description The value to consider as the 0% starting point
Property
max
TypeNumber
Default100
Description The value to consider as the 100% ending point
Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the progress component

Slots

Use slots to insert custom content into well-defined component locations.

Property
default
Description Slot for default progress content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

Property
----background
Valuecolor('light')
Description The background of the progress component
Property
----border-top-color
Valuecolor('light-55')
Description The border top color of the progress component
Property
----border-right-color
Valuecolor('light-55')
Description The border right color of the progress component
Property
----border-bottom-color
Valuecolor('light-55')
Description The border bottom color of the progress component
Property
----border-left-color
Valuecolor('light-55')
Description The border left color of the progress component
Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the progress component
Property
----border-style
Valuevar(--border-style)
Description The border style of the progress component
Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the progress component
Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the progress component
Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the progress component
Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the progress component
Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the progress component
Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the progress component
Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the progress component
Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the progress component
Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the progress component
Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the progress component
Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the progress component
Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the progress component
Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the progress component
Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the progress component
Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the progress component
Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the progress component
Property
----height
Valuespacing('3/4')
Description The height of the progress component