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.

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

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.

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

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

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

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

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

<i-progress :min="100" :max="200" >
    <i-progress-bar :value="150" />
</i-progress>

Stacked Bars

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

<i-progress>
    <i-progress-bar color="success" value="40" />
    <i-progress-bar color="warning" value="20" />
    <i-progress-bar color="danger" value="10" />
</i-progress>

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