Progressbar

Default Progress Bar ( add class .progress-bar.)

Show Code 

<div class="progress">
	<div class="progress-bar" style="width:30%"></div>
</div>

Success Progress Bar ( add class .progress-bar , .bg-success.)

Show Code 

<div class="progress">
	<div class="progress-bar bg-success" style="width:40%"></div>
</div>

Danger Progress Bar ( add class .progress-bar , .bg-danger.)

Show Code 

<div class="progress">
	<div class="progress-bar bg-danger" style="width:70%"></div>
</div>

Striped Progress Bars ( add class .progress-bar-striped.)





Show Code 

<div class="progress">
	<div class="progress-bar progress-bar-striped" style="width: 40%">
	</div>
</div> 
<div class="progress">
	<div class="progress-bar bg-success progress-bar-striped" style="width: 40%">
	</div>
</div> 
<div class="progress">
	<div class="progress-bar bg-info progress-bar-striped" style="width: 50%">
	</div>
</div> 
<div class="progress">
	<div class="progress-bar bg-warning progress-bar-striped" style="width: 60%">
	</div>
</div> 
<div class="progress">
	<div class="progress-bar bg-danger progress-bar-striped" style="width: 70%">
	</div>
</div>

Animated Progress Bars ( add class .progress-bar-animated.)





Show Code 

<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%">
	</div>
</div> 
<div class="progress">
	<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%">
	</div>
</div> 
<div class="progress">
	<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 50%">
	</div>
</div>
 <div class="progress">
	<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 60%">
	</div>
</div> 
<div class="progress">
	<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 70%">
	</div>
</div>