ProgressBar
Progress Bars provide a visual display method for progress or percentages in a range.
![Screenshot of component ProgressBar with-default-intent](/static/842886afc7de2ba84474775eb4e46d35/ProgressBar-with-default-intent-desktop.png)
Usage
import { ProgressBar } from '@electricui/components-desktop-blueprint' <ProgressBar accessor ="motion_progress" min ={0} max ={100} />
Intent
The intent property allows you to change the colour. The default is none
.
![Screenshot of component ProgressBar with-default-intent](/static/842886afc7de2ba84474775eb4e46d35/ProgressBar-with-default-intent-desktop.png)
![Screenshot of component ProgressBar with-primary-intent](/static/164198eb8a6bad98fd25ac6615909fd8/ProgressBar-with-primary-intent-desktop.png)
![Screenshot of component ProgressBar with-success-intent](/static/8d8a45e8509b1fa1f9207cec2db12e55/ProgressBar-with-success-intent-desktop.png)
![Screenshot of component ProgressBar with-warning-intent](/static/e6b7d3b944132e944bb9e615fb4d6ef6/ProgressBar-with-warning-intent-desktop.png)
![Screenshot of component ProgressBar with-danger-intent](/static/6c793f20f4d445b6e880649b024c29e5/ProgressBar-with-danger-intent-desktop.png)
<ProgressBar accessor ="startup_prog" min ={0} max ={100} intent ="none" />
<ProgressBar accessor ="startup_prog" min ={0} max ={100} intent ="primary" />
<ProgressBar accessor ="startup_prog" min ={0} max ={100} intent ="success" />
<ProgressBar accessor ="startup_prog" min ={0} max ={100} intent ="warning" />
<ProgressBar accessor ="startup_prog" min ={0} max ={100} intent ="danger" />
Stripes
Stripes provide a cosmetic distinction, and animate by default.
![Screenshot of component ProgressBar stripes](/static/4ceb84cdeae6224e903ce2b94f90fa1c/ProgressBar-stripes-desktop.png)
<ProgressBar accessor ="motion_progress" min ={10} max ={40} stripes />
Animation
Disable animated stripes by setting the animate
property to false.
<ProgressBar accessor ="motion_progress" animate ={false} />