Progress

Represent the completion status of a task or process

Use the Progress component to provide users with feedback on the progress of ongoing activities such as data processing, form progress, task completion, isntallation or updates, or use them as general loading indicators.

---
import { Progress } from 'webcoreui/astro'
---

<Progress value={33} />

<script>
    import { Progress } from 'webcoreui/svelte'
</script>

<Progress value={33} />

import React from 'react'
import { Progress } from 'webcoreui/react'

const Component = () => <Progress value={33} />

export default Component

Sizes

Progress bars comes with three different sizes out of the box: small (default), medium, and large:

<Progress value={33} />
<Progress value={33} size="medium" />
<Progress value={33} size="large" />

Styles

Progress bars can also be styled in many different way by using the following props:

color?: string
background?: string
square?: boolean
striped?: boolean
stripeLight?: string
stripeDark?: string

<Progress
    value={33}
    color="#1dd1a1"
    background="#002c20"
/>

<Progress
    value={33}
    striped={true}
/>

<Progress
    value={33}
    square={true}
/>

<Progress
    value={33}
    striped={true}
    stripeLight="#92CE72"
    stripeDark="#70C542"
/>

Using these props allows you to style progress bars individually. However, if you have the same styles for every progress bar globally, the recommended way to change their style is by overriding the following CSS variables:

html body {
    --w-progress-color: #FFF;
    --w-progress-background: #252525;
    --w-progress-stripe-light: #FFF;
    --w-progress-stripe-dark: #DDD;
}

Labels

Progress bars can also be labelled by setting the label prop to true. The label will take the color of the background:

<Progress
    value={33}
    size="medium"
    label={true}
/>

To display a label outside of the progress bar, omit the label prop and add the label outside of the component:

<p>
    <span>Progress</span>
    <span>{value}%</span>
</p>
<Progress value={value} />

<style>
    p {
        display: flex;
        justify-content: space-between;
        margin: 0 0 5px 0;
        font-size: 14px;
        color: #BBB;
    }
</style>

API

type ProgressProps = {
    value: number
    size?: 'medium' | 'large'
    label?: boolean
    color?: string
    background?: string
    square?: boolean
    striped?: boolean
    stripeLight?: string
    stripeDark?: string
    className?: string
}