Search documentation v0.6.1

Progress

Represent the completion status of a task or process

Source ↗️ Report Issue ↗️

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.

Preview
How to use Progress bars in Astro
---
import { Progress } from 'webcoreui/astro'
---
<Progress value={33} />
How to use Progress bars in Svelte
<script>
import { Progress } from 'webcoreui/svelte'
</script>
<Progress value={33} />
How to use Progress bars in React
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:

33%
33%
<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:

Progress33%

<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
}
PropPurpose
value Set the value of the pogress from 0 to 100.
size Set the size of the of the progress bar.
label Shows the progress with a label inside the progress bar. Defaults to false.
color Set the color of the progress bar.
background Set the background color of the progress bar.
square Changes the style of the progress bar from rounded to square. Defaults to false.
striped Changes the style of the progress bar to striped. Defaults to false.
stripeLight Set the light color of striped progress bars.
stripeDark Set the dark color of striped progress bars.
className Pass additional CSS classes for the progress bar.

Request improvement for this page