ProgressBar

See React Bootstrap/Progress Bars for full documentation and props.

Result

Loading...

Live Editor

<ProgressBar now={60} />

<ProgressBar now={60} />

With Label

Result

Loading...

Live Editor

<ProgressBar now={60} label={`60%`} />

<ProgressBar now={60} label={`60%`} />

Variants

Result

Loading...

Live Editor

<> <ProgressBar now={60} className="mb-4" /> <ProgressBar variant="success" now={40} className="mb-4" /> <ProgressBar variant="info" now={20} className="mb-4" /> <ProgressBar variant="warning" now={60} className="mb-4" /> <ProgressBar variant="danger" now={80} className="mb-4" /> </>

<>
  <ProgressBar now={60} className="mb-4" />
  <ProgressBar variant="success" now={40} className="mb-4" />
  <ProgressBar variant="info" now={20} className="mb-4" />
  <ProgressBar variant="warning" now={60} className="mb-4" />
  <ProgressBar variant="danger" now={80} className="mb-4" />
</>

Stacked

Stacked progress bars do not support min/max props. They will only render from 0 to 100.

Result

Loading...

Live Editor

<ProgressBar> <ProgressBar variant="success" now={35} key={1} /> <ProgressBar variant="warning" now={20} key={2} /> <ProgressBar variant="danger" now={10} key={3} /> </ProgressBar>

<ProgressBar>
  <ProgressBar variant="success" now={35} key={1} />
  <ProgressBar variant="warning" now={20} key={2} />
  <ProgressBar variant="danger" now={10} key={3} />
</ProgressBar>

Sizes

Progress bars can be small, medium (default), or large.

Result

Loading...

Live Editor

<> <ProgressBar now={60} size="sm" className="mb-4" /> <ProgressBar now={60} size="md" className="mb-4" /> <ProgressBar now={60} size="lg" className="mb-4" /> </>

<>
  <ProgressBar now={60} size="sm" className="mb-4" />
  <ProgressBar now={60} size="md" className="mb-4" />
  <ProgressBar now={60} size="lg" className="mb-4" />
</>

Props