Progress Bar
View in LexiconProgress bar indicates the percentage completed of a task.
| install | yarn add @clayui/progress-bar |
|---|---|
| version |  |
| use | import ProgressBar from '@clayui/progress-bar'; |
Table of Contents
Colors
Add progress-danger, progress-info, progress-success, or progress-warning to progress-group or progress to provide visual feedback for different progress states. Color a block of text or icon by wrapping it with progress-group-feedback.
Using the color classes will set the background-color on progress-bar, no
need to use Bootstrap 4 background utility classes.
<div className="progress">
<div
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '25%'}}
>
25%
</div>
</div>
<div className="progress progress-success">
<div
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar progress-bar-striped"
role="progressbar"
style={{width: '25%'}}
>
25%
</div>
</div>
<div className="progress progress-info">
<div
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '50%'}}
>
50%
</div>
</div>
<div className="progress progress-warning">
<div
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar progress-bar-animated progress-bar-striped"
role="progressbar"
style={{width: '75%'}}
>
75%
</div>
</div>
<div className="progress progress-danger">
<div
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '100%'}}
>
100%
</div>
</div>
Group
60%
<div className="progress-group">
<div className="progress">
<div
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '60%'}}
></div>
</div>
<div className="progress-group-addon">60%</div>
</div>
<div className="progress-group progress-success">
<div className="progress">
<div
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar progress-bar-striped"
role="progressbar"
style={{width: '100%'}}
></div>
</div>
<div className="progress-group-addon">
<div className="progress-group-feedback">
<svg
className="lexicon-icon lexicon-icon-check-circle"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check-circle" />
</svg>
</div>
</div>
</div>
<div className="progress-group progress-info">
<div className="progress">
<div
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '100%'}}
></div>
</div>
<div className="progress-group-addon">
<div className="progress-group-feedback">
<svg
className="lexicon-icon lexicon-icon-info-circle-open"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#info-circle-open" />
</svg>
</div>
</div>
</div>
<div className="progress-group progress-warning">
<div className="progress">
<div
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar progress-bar-animated progress-bar-striped"
role="progressbar"
style={{width: '100%'}}
></div>
</div>
<div className="progress-group-addon">
<div className="progress-group-feedback">
<svg
className="lexicon-icon lexicon-icon-info-exclamation-circle"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#info-exclamation-circle" />
</svg>
</div>
</div>
</div>
<div className="progress-danger progress-group">
<div className="progress">
<div
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '100%'}}
></div>
</div>
<div className="progress-group-addon">
<div className="progress-group-feedback">
<svg
className="lexicon-icon lexicon-icon-times-circle"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times-circle" />
</svg>
</div>
</div>
</div>
Sizes
We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.
60%
60%
<div className="progress">
<div
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '25%'}}
>
25%
</div>
</div>
<div className="progress-group">
<div className="progress">
<div
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '60%'}}
></div>
</div>
<div className="progress-group-addon">60%</div>
</div>
<div className="progress progress-lg">
<div
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '45%'}}
>
45%
</div>
</div>
<div className="progress-group progress-lg">
<div className="progress">
<div
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '60%'}}
></div>
</div>
<div className="progress-group-addon">60%</div>
</div>
<div className="progress" style={{height: '20px'}}>
<div
className="progress-bar"
role="progressbar"
style={{width: '25%'}}
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
Groups
Addon
Place an addon on either side of a progress component with progress-group and progress-group-addon.
30%
70%
<div className="progress-group">
<div className="progress">
<div
aria-valuenow="30"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '30%'}}
></div>
</div>
<div className="progress-group-addon">30%</div>
</div>
<div className="progress-group progress-warning">
<div className="progress">
<div
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '70%'}}
></div>
</div>
<div className="progress-group-addon">70%</div>
</div>
<div className="progress-group progress-success">
<div className="progress">
<div
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '100%'}}
></div>
</div>
<div className="progress-group-addon">
<div className="progress-group-feedback">
<svg
className="lexicon-icon lexicon-icon-check-circle"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check-circle" />
</svg>
</div>
</div>
</div>
<div className="progress-group">
<div className="progress-group-addon">
<div className="progress-group-feedback">
<svg
className="lexicon-icon lexicon-icon-check-circle"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#check-circle" />
</svg>
</div>
</div>
<div className="progress">
<div
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '100%'}}
></div>
</div>
</div>
Stacked
Add progress-group-stacked to progress-group stack the addons and progress component.
60% Completed
<div className="progress-group progress-group-stacked">
<div className="progress-group-addon">60% Completed</div>
<div className="progress">
<div
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
className="progress-bar"
role="progressbar"
style={{width: '60%'}}
></div>
</div>
<div className="progress-group-addon">
<svg
className="lexicon-icon lexicon-icon-cog"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#cog" />
</svg>
</div>
</div>
Multiple Progress Bars
If you need multiple progress bars, use Bootstrap 4’s background utilities, bg-primary, bg-success, bg-info, bg-warning, and bg-danger on progress-bar.
<div className="progress">
<div
className="bg-success progress-bar progress-bar-striped"
style={{width: '25%'}}
>
25%
</div>
<div className="bg-success progress-bar" style={{width: '25%'}}>25%</div>
<div
className="bg-success progress-bar progress-bar-animated progress-bar-striped"
style={{width: '25%'}}
>
25%
</div>
</div>
<div className="progress">
<div className="bg-info progress-bar progress-bar-striped" style={{width: '50%'}}>
50%
</div>
<div className="bg-info progress-bar" style={{width: '50%'}}>50%</div>
</div>
<div className="progress">
<div
className="bg-warning progress-bar progress-bar-animated progress-bar-striped"
style={{width: '33%'}}
>
33%
</div>
<div
className="bg-warning progress-bar progress-bar-striped"
style={{width: '33%'}}
>
33%
</div>
</div>
<div className="progress">
<div className="bg-danger progress-bar" style={{width: '45%'}}>45%</div>
<div
className="bg-danger progress-bar progress-bar-animated progress-bar-striped"
style={{width: '45%'}}
>
45%
</div>
</div>
<div className="progress">
<div className="progress-bar" style={{width: '10%'}}>10%</div>
<div className="bg-warning progress-bar" style={{width: '10%'}}>10%</div>
<div className="bg-success progress-bar" style={{width: '10%'}}>10%</div>
<div className="bg-info progress-bar" style={{width: '10%'}}>10%</div>
<div
className="bg-success progress-bar progress-bar-striped"
style={{width: '10%'}}
>
10%
</div>
<div
className="bg-danger progress-bar progress-bar-animated progress-bar-striped"
style={{width: '10%'}}
>
10%
</div>
<div
className="progress-bar progress-bar-animated progress-bar-striped"
style={{width: '10%'}}
>
10%
</div>
</div>
Labels
Add labels to your progress bars by placing text within the .progress-bar.
<div className="progress">
<div
className="progress-bar"
role="progressbar"
style={{width: '25%'}}
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
25%
</div>
</div>
Striped
Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.
<div className="progress">
<div
className="progress-bar progress-bar-striped"
role="progressbar"
style={{width: '10%'}}
aria-valuenow="10"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div className="progress">
<div
className="progress-bar progress-bar-striped bg-success"
role="progressbar"
style={{width: '25%'}}
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div className="progress">
<div
className="progress-bar progress-bar-striped bg-info"
role="progressbar"
style={{width: '50%'}}
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div className="progress">
<div
className="progress-bar progress-bar-striped bg-warning"
role="progressbar"
style={{width: '75%'}}
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div className="progress">
<div
className="progress-bar progress-bar-striped bg-danger"
role="progressbar"
style={{width: '100%'}}
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
Animated Stripes
The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
<div className="progress">
<div
className="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
style={{width: '75%'}}
></div>
</div>