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.

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

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.

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

Variants

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

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

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

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.

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

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

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

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

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

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

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

<i-progress variant="dark">
    <i-progress-bar variant="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>
    <i-progress-bar min="100" max="200" 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 a 100% percentage.

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

Component API

Here you can find a list of the various customization options you can use for the progress components as props, as well as available slots.

Sass Variables

Here you can find a list of the Sass variables you can use for the progress components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

(
    light: $progress-variant-light,
    dark: $progress-variant-dark
)

@function progress-variant($variant) {
    $progress-variant-color: variant-color-by-luminance($variant, $progress-color-for-light-variant, $progress-color-for-dark-variant);
    $progress-variant-background: $variant;

    $variant-map: (
        color: $progress-variant-color,
        background: $progress-variant-background,
    );

    @return $variant-map;
}

(
    primary: $progress-bar-variant-primary,
    secondary: $progress-bar-variant-secondary,
    light: $progress-bar-variant-light,
    dark: $progress-bar-variant-dark,
    info: $progress-bar-variant-info,
    success: $progress-bar-variant-success,
    warning: $progress-bar-variant-warning,
    danger: $progress-bar-variant-danger
)

@function progress-bar-variant($variant) {
    $progress-bar-variant-color: variant-color-by-luminance($variant, $progress-color-for-light-variant, $progress-color-for-dark-variant);
    $progress-bar-variant-background: $variant;

    $variant-map: (
        color: $progress-bar-variant-color,
        background: $progress-bar-variant-background,
    );

    @return $variant-map;
}