Skip to main content

Progress Bar

Provide progress bar to check work progress.

Percentage#

Add percentage by percentage prop. Add text by children prop.

35%
<>
<ProgressBar percentage={35}>35%</ProgressBar>
</>

Color#

Set the custom color by color prop.

35%
<>
<ProgressBar percentage={35} color="pink">35%</ProgressBar>
</>

Height#

Set the custom height by height prop.

35%
<>
<ProgressBar percentage={35} height="20px">35%</ProgressBar>
</>

Close#

Add close content by close prop.

35%


<>
<ProgressBar percentage={35} close={<Button>Close button</Button>} height="20px">35%</ProgressBar>
</>

API#

import ProgressBar from "erxes-ui/lib/components/ProgressBar";

* required prop

NameTypeDefaultDescription
childrenReact.ReactNodeShows content on progress bar
closeReact.ReactNodeDisplays the close element on bottom of the progress bar
percentage*numberSets percentage of the progress bar
colorstring#dddeffSets color of the progress
heightstring36pxSets height of the progress bar
Last updated on by enkhzule