Progress

  1. Elements
  2. Progress
Basic Progress

 <ProgressBar now={0} className="progress mb-3" />
 <ProgressBar now={25} className="progress mb-3" />
 <ProgressBar now={50} className="progress mb-3" />
 <ProgressBar now={75} className="progress mb-3" />
 <ProgressBar now={100} className="progress mb-0" />
Different Colored Progress

<ProgressBar  variant='secondary' now={20} className="progress mb-3" />
<ProgressBar  variant='warning' now={40} className="progress mb-3" />
<ProgressBar  variant='info' now={60} className="progress mb-3" />
<ProgressBar  variant='success' now={80} className="progress mb-3" />
<ProgressBar  variant='danger' now={100} className="progress mb-0" />
Striped Progress
<ProgressBar striped variant='primary' now={10} className="progress mb-3" />
<ProgressBar striped variant='secondary' now={25} className="progress mb-3" />
<ProgressBar striped variant='success' now={50} className="progress mb-3" />
<ProgressBar striped variant='info' now={75} className="progress mb-3" />
<ProgressBar striped variant='warning' now={100} className="progress mb-0" />
Progress Height
<ProgressBar  variant='primary' now={10} className="progress progress-xs mb-3" />
<ProgressBar  variant='primary' now={25} className="progress progress-sm mb-3" />
<ProgressBar  variant='primary' now={50} className="progress  mb-3" />
<ProgressBar  variant='primary' now={75} className="progress progress-lg mb-3" />
<ProgressBar  variant='primary' now={100}className="progress progress-xl mb-3" />
Progress With Labels
10%
20%
40%
60%
80%
<ProgressBar variant='primary' now={10} label={10} className="progress mb-3" />
<ProgressBar variant='secondary' now={20} label={20} className="progress mb-3" />
<ProgressBar variant='success' now={40} label={40%} className="progress mb-3" />
<ProgressBar variant='info' now={60} label={60}% className="progress mb-3" />
<ProgressBar variant='warning' now={80} label={80%} className="progress mb-0" />
Multiple bars With Sizes
<ProgressBar className="progress-stacked progress-sm mb-3" >
<ProgressBar striped variant="warning" now={15} key={1} />
<ProgressBar variant="info" now={20} key={2} />
<ProgressBar striped variant="danger" now={25} key={3} />    
</ProgressBar>
Animated Stripped Progress
<ProgressBar  variant='' className="progress mb-3" animated now={10} />
<ProgressBar  variant='secondary' className="progress mb-3" animated now={20} />
<ProgressBar  variant='success' className="progress mb-3" animated now={40} />
<ProgressBar  variant='info' className="progress mb-3" animated now={60} />
<ProgressBar  variant='warning' className="progress" animated now={80} />
Gradient Progress
 <ProgressBar  variant='primary-gradient' className="progress mb-3" animated now={10} />
 <ProgressBar  variant='secondary-gradient' className="progress mb-3" animated now={20} />
 <ProgressBar  variant='success-gradient' className="progress mb-3" animated now={40} />
 <ProgressBar  variant='info-gradient' className="progress mb-3" animated now={60} />
 <ProgressBar  variant='warning-gradient' className="progress" animated now={80} />
Custom Animated Progress
<ProgressBar  variant='primary-gradient' className="progress mb-3 progress-animate" animated now={10} />
 <ProgressBar  variant='secondary-gradient' className="progress mb-3 progress-animate" animated now={20} />
 <ProgressBar  variant='success-gradient' className="progress mb-3 progress-animate" animated now={40} />
 <ProgressBar  variant='info-gradient' className="progress mb-3 progress-animate" animated now={60} />
 <ProgressBar  variant='warning-gradient' className="progress  progress-animate" animated now={80} />
Custom Progress-1
Mobiles
Watches
Shirts
<ProgressBar  variant='primary-gradient' className="progress mb-3 progress-animate" animated now={10} />
 <ProgressBar  variant='secondary-gradient' className="progress mb-3 progress-animate" animated now={20} />
 <ProgressBar  variant='success-gradient' className="progress mb-3 progress-animate" animated now={40} />
 <ProgressBar  variant='info-gradient' className="progress mb-3 progress-animate" animated now={60} />
 <ProgressBar  variant='warning-gradient' className="progress  progress-animate" animated now={80} />
Custom Progress-2
<ProgressBar className="progress progress-sm mb-4">
<div className="progress-item-1 bg-secondary"></div>
<div className="progress-item-2 bg-secondary"></div>
<div className="progress-item-3"></div>
<ProgressBar variant="secondary" now={60} />
</ProgressBar>
Custom Progress-3
50%
60%
70%
<ProgressBar className="progress progress-sm mb-4">
<div className="progress-item-1 bg-secondary"></div>
<div className="progress-item-2 bg-secondary"></div>
<div className="progress-item-3"></div>
<ProgressBar variant="secondary" now={60} />
</ProgressBar>
Custom Progress-4
10%
20%
40%
60%
80%
90% 
<ProgressBar className="progress progress-xl mb-3 progress-animate custom-progress-4">
<ProgressBar variant='secondary-gradient' now={20} />
<div className="progress-bar-label">20%</div>
</ProgressBar>
Custom Progress-5
Project Dependencies
25%
35%
40%

Html25%

Css35%

Js40%

<h6 className="fw-semibold mb-2">Project Dependencies</h6>
 <ProgressBar className="progress-stacked progress-xl mb-5" >
    <ProgressBar  variant="primary" now={25} label={25%} key={1} />
    <ProgressBar  variant="secondary" now={35} label={35%} key={2} />
    <ProgressBar  variant="danger" now={40} label={40%} key={3} />    
</ProgressBar>
 <Row className="justify-content-center">
     <Col xl={5}>
         <div className="border p-3">
             <p className="fs-12 fw-semibold mb-0 text-muted">Html<span className="float-end fs-10 fw-normal">25%<
             /span></p>
             <ProgressBar className="progress progress-xs mb-4 progress-animate"  variant="primary" now={25} />   
             <p className="fs-12 fw-semibold mb-0 text-muted">Css<span className="float-end fs-10 fw-normal">35%
             </span></p>
             <ProgressBar className="progress progress-xs mb-4 progress-animate"  variant="secondary" now={35} />  
             <p className="fs-12 fw-semibold mb-0 text-muted">Js<span className="float-end fs-10 fw-normal">40%
             </span></p>
             <ProgressBar className="progress progress-xs mb-4 progress-animate"  variant="danger" now={40} />  
         </div>
     </Col>
 </Row>