Tabler components
Progress bar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!
Label
45%
Label
32%
Label
90%
Label
51%
<div>
<div class="d-flex mb-1 align-items-center lh-1">
<div class="text-h5 font-weight-bolder m-0">Label</div>
<span class="ml-auto text-h6 strong">45%</span>
</div>
<div class="progress progress-sm">
<div class="progress-bar bg-blue" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">45% Complete</span>
</div>
</div>
</div>
<div>
<div class="d-flex mb-1 align-items-center lh-1">
<div class="text-h5 font-weight-bolder m-0">Label</div>
<span class="ml-auto text-h6 strong">32%</span>
</div>
<div class="progress progress-sm">
<div class="progress-bar bg-red" style="width: 32%" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">32% Complete</span>
</div>
</div>
</div>
<div>
<div class="d-flex mb-1 align-items-center lh-1">
<div class="text-h5 font-weight-bolder m-0">Label</div>
<span class="ml-auto text-h6 strong">90%</span>
</div>
<div class="progress progress-sm">
<div class="progress-bar bg-yellow" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">90% Complete</span>
</div>
</div>
</div>
<div>
<div class="d-flex mb-1 align-items-center lh-1">
<div class="text-h5 font-weight-bolder m-0">Label</div>
<span class="ml-auto text-h6 strong">51%</span>
</div>
<div class="progress progress-sm">
<div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">51% Complete</span>
</div>
</div>
</div>