Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Basic progress in diffrent color backgrounds. Add .bg-*
modifier class to change the color. Use Bootstrap width utilities for setting the width of a progress bar.
<div class="progress mb-5">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Class | Values |
---|---|
class="progress-bar bg-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark |
Use the .progress.progress-width-animated
class.
<div class="progress progress-width-animated mb-5">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" ><span class="progress-tooltip">25</span></div>
</div>
<div class="progress progress-width-animated mb-5">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><span class="progress-tooltip">50</span></div>
</div>
<div class="progress progress-width-animated">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><span class="progress-tooltip">75</span></div>
</div>
Create rounded progress using .progress .progress-bar-rounded
class.
<div class="progress progress-bar-rounded mb-5">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-rounded mb-5">
<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-rounded">
<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Add .progress-bar-striped
to any .progress-bar
to apply a stripe via CSS gradient over the progress bar’s background color. Add .progress-bar-animated
to .progress-bar
to animate the stripes right to left via CSS3 animations.
<div class="progress mb-5">
<div class="progress-bar progress-bar-striped bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
<div class="progress-bar progress-bar-striped bg-success w-30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
<div class="progress-bar progress-bar-striped bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Size whatever you want just add .progress-xs, sm, md, lg, xl
or you can just add height utility classes.
<div class="progress progress-bar-xs mb-5">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-sm mb-5">
<div class="progress-bar bg-primary w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-md mb-5">
<div class="progress-bar bg-primary w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-lg mb-5">
<div class="progress-bar bg-primary w-85" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-xl">
<div class="progress-bar bg-primary w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Add labels on top of your progress bars by placing text within the .progress-label
inside .progress-lb-wrap
and for label left add class .lb-side-left
with .progress-wrap
.
<div class="progress-lb-wrap mb-3">
<label class="progress-label">organic</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-lb-wrap mb-3">
<label class="progress-label">Referral</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-lb-wrap mb-3">
<label class="progress-label">email</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-lb-wrap">
<label class="progress-label">paid search</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="title-sm mt-5">Labels on left</div>
<div class="row">
<div class="col-md-6 col-sm">
<div class="progress-wrap lb-side-left">
<div class="progress-lb-wrap mb-5">
<label class="progress-label mnw-100p">organic</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-lb-wrap mb-5">
<label class="progress-label mnw-100p">Referral</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-success w-40" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm">
<div class="progress-wrap lb-side-left">
<div class="progress-lb-wrap mb-5">
<label class="progress-label mnw-100p">email</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-info w-50" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-lb-wrap mb-5">
<label class="progress-label mnw-100p">paid search</label>
<div class="progress progress-bar-xs">
<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="title-sm">Labels inside</div>
<div class="row">
<div class="col-md-6 col-sm">
<div class="progress-wrap">
<div class="progress-lb-wrap mb-5">
<div class="progress">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div>
<div class="progress-lb-wrap mb-5">
<div class="progress">
<div class="progress-bar bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm">
<div class="progress-wrap">
<div class="progress-lb-wrap mb-5">
<div class="progress">
<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">loading</div>
</div>
</div>
<div class="progress-lb-wrap">
<div class="progress">
<div class="progress-bar bg-danger w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">photoshop</div>
</div>
</div>
</div>
</div>
</div>
Include multiple progress bars in a progress component if you need.
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success w-30" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>