loader

Basic Progress

,
Html
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-default" style="width: 7%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 20%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 40%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 60%"></div>
</div>
<div class="progress progress-md">
	<div class="progress-bar bg-primary" style="width: 80%"></div>
</div>

Contextual Progress

Html
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-pink" style="width: 7%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-green" style="width: 20%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-yellow" style="width: 40%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-blue" style="width: 60%"></div>
</div>
<div class="progress progress-md ">
	<div class="progress-bar bg-orange" style="width: 80%"></div>
</div>

Basic Progress with label

7%
20%
40%
60%
80%
Html
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 7%">7%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 20%"> 20%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 40%"> 40%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 60%"> 60%</div>
</div>
<div class="progress progress-md">
	<div class="progress-bar bg-primary" style="width: 80%"> 80%</div>
</div>

Contextual Progress with label

7%
20%
40%
60%
80%
Html
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-pink" style="width: 7%"> 7%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-green" style="width: 20%">20%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-yellow" style="width: 40%">40%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-blue" style="width: 60%">60%</div>
</div>
<div class="progress progress-md ">
	<div class="progress-bar bg-orange" style="width: 80%"> 80%</div>
</div>

Progress Sizes

70%
80%
Html
<div class="progress progress-xs mb-3">
	<div class="progress-bar bg-blue" style="width: 30%"></div>
</div>
<div class="progress progress-sm mb-3">
	<div class="progress-bar bg-blue" style="width: 60%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-blue" style="width: 70%">70%</div>
</div>
<div class="progress progress-lg">
	<div class="progress-bar bg-blue" style="width: 80%">80%</div>
</div>

Mixed color Progress with Sizes

Html
<div class="progress progress-xs mb-3">
	<div class="progress-bar bg-orange" style="width: 5%"></div>
	<div class="progress-bar bg-warning" style="width: 5%"></div>
	<div class="progress-bar bg-info" style="width: 5%"></div>
</div>
<div class="progress progress-sm mb-3">
	<div class="progress-bar bg-pink" style="width: 10%"></div>
	<div class="progress-bar bg-yellow" style="width: 15%"></div>
	<div class="progress-bar bg-teal" style="width: 15%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-pink" style="width: 18%"></div>
	<div class="progress-bar bg-blue" style="width: 20%"></div>
	<div class="progress-bar bg-cyan" style="width: 30%"></div>
</div>
<div class="progress progress-lg">
	<div class="progress-bar bg-green" style="width: 30%"></div>
	<div class="progress-bar bg-pink" style="width: 20%"></div>
	<div class="progress-bar bg-orange" style="width: 40%"></div>
</div>

Striped Progress

50%
40%
Html
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-teal" style="width: 15%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 25%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-yellow" style="width: 50%">50%</div>
</div>
<div class="progress progress-md">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-green" style="width: 70%">40%</div>
</div>

Animated Progress

Html
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-indeterminate bg-pink" ></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-indeterminate bg-cyan"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-indeterminate bg-teal"></div>
</div>
<div class="progress progress-md">
	<div class="progress-bar progress-bar-indeterminate bg-purple"></div>
</div>