Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
import ProgressBar from 'react-bootstrap/ProgressBar'
{/* Primary progress bar */}
<ProgressBar variant='primary' now={45} label='45%' />
{/* Accent progress bar */}
<ProgressBar variant='accent' now={60} label='60%' />
{/* Success progress bar */}
<ProgressBar variant='success' now={55} label='55%' />
{/* Danger progress bar */}
<ProgressBar variant='danger' now={40} label='40%' />
{/* Warning progress bar */}
<ProgressBar variant='warning' now={70} label='70%' />
{/* Info progress bar */}
<ProgressBar variant='info' now={60} label='60%' />
{/* Dark progress bar */}
<ProgressBar variant='dark' now={33} label='33%' />
import ProgressBar from 'react-bootstrap/ProgressBar'
{/* Primary progress bar */}
<div className='fs-sm mb-2'>45%</div>
<ProgressBar variant='primary' now={45} style={{height: '4px'}} />
{/* Accent progress bar */}
<div className='fs-sm mb-2'>60%</div>
<ProgressBar variant='accent' now={60} style={{height: '4px'}} />
{/* Success progress bar */}
<div className='fs-sm mb-2'>55%</div>
<ProgressBar variant='success' now={55} style={{height: '4px'}} />
{/* Danger progress bar */}
<div className='fs-sm mb-2'>40%</div>
<ProgressBar variant='danger' now={40} style={{height: '4px'}} />
{/* Warning progress bar */}
<div className='fs-sm mb-2'>70%</div>
<ProgressBar variant='warning' now={70} style={{height: '4px'}} />
{/* Info progress bar */}
<div className='fs-sm mb-2'>60%</div>
<ProgressBar variant='info' now={60} style={{height: '4px'}} />
{/* Dark progress bar */}
<div className='fs-sm mb-2'>33%</div>
<ProgressBar variant='dark' now={33} style={{height: '4px'}} />
import ProgressBar from 'react-bootstrap/ProgressBar'
{/* Thick bars */}
<ProgressBar>
<ProgressBar variant='info' now={15} />
<ProgressBar variant='primary' now={10} />
<ProgressBar variant='success' now={20} />
<ProgressBar variant='warning' now={25} />
</ProgressBar>
{/* Thin bars */}
<ProgressBar style={{height: '4px'}}>
<ProgressBar variant='warning' now={20} />
<ProgressBar variant='info' now={25} />
<ProgressBar variant='danger' now={10} />
<ProgressBar variant='success' now={15} />
</ProgressBar>
import ProgressBar from 'react-bootstrap/ProgressBar'
{/* Animated striped primary progress bar */}
<ProgressBar animated variant='primary' now={45} />
{/* Animated striped accent progress bar */}
<ProgressBar animated variant='accent' now={60} />
{/* Animated striped success progress bar */}
<ProgressBar animated variant='success' now={55} />
{/* Animated striped danger progress bar */}
<ProgressBar animated variant='danger' now={40} />
{/* Animated striped warning progress bar */}
<ProgressBar animated variant='warning' now={70} />
{/* Animated striped info progress bar */}
<ProgressBar animated variant='info' now={60} />
{/* Animated striped dark progress bar */}
<ProgressBar animated variant='dark' now={33} />
import ProgressBar from 'react-bootstrap/ProgressBar'
{/* Primary light progress bar */}
<ProgressBar variant='primary' now={45} label='45%' className='progress-light' />
{/* Accent light progress bar */}
<ProgressBar variant='accent' now={60} label='60%' className='progress-light' />
{/* Success light progress bar */}
<ProgressBar variant='success' now={55} label='55%' className='progress-light' />
{/* Danger light progress bar */}
<ProgressBar variant='danger' now={40} label='40%' className='progress-light' />
{/* Warning light progress bar */}
<ProgressBar variant='warning' now={70} label='70%' className='progress-light' />
{/* Info light progress bar */}
<ProgressBar variant='info' now={60} label='60%' className='progress-light' />