Progress bars

Default Progress bars

<div class="progress">
<div class="progress-bar progress-bar-danger " role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
</div>
60% Complete

Default Progress bars

<div class="progress progress-lg">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 75%; role="progressbar""> 75% </div>
</div>
75%

Striped

<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%;"> <span class="sr-only">85% Complete</span></div>
</div>
85% Complete (success)

Colored bars

You can give bootstrap colors to progress bars

20% Complete
30% Complete
40% Complete
50% Complete
60% Complete
80% Complete

All size Bars

Size whatever you want just add class progress sm, md, lg

20% Complete
30% Complete
60% Complete
80% Complete

Animated Bars

You can also use animated bar by just putting active class

85% Complete (success)
85% Complete (success)
85% Complete (success)
85% Complete (success)

Vertical Progress bars

88% Complete
88% Complete
88% Complete
88% Complete
88% Complete
88% Complete

From bottom

88% Complete
88% Complete
88% Complete
88% Complete
88% Complete
88% Complete

Striped

88% Complete
88% Complete
88% Complete
88% Complete

Vertical Progress bars

88% Complete
88% Complete
88% Complete
88% Complete

Animated Progress bars

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete

Stacked Progress bars

Skill bars

Photoshop85%
85% Complete (success)
Dreamweaver80%
85% Complete (success)
Illustrator70%
85% Complete (success)
Corel Draw45%
85% Complete (success)
2017 © Ample Admin brought to you by themedesigner.in