نوارهای پیشرفت

نوار های پیشرفت پیش فرض

<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% انجام شده

نوار های پیشرفت پیش فرض

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

راه راه

<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% انجام شده (موفقیت)

نوار های رنگی

You can give bootstrap colors to progress bars

20% انجام شده
30% انجام شده
40% انجام شده
50% انجام شده
60% انجام شده
80% انجام شده

اندازه های نوار ها

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

20% انجام شده
30% انجام شده
60% انجام شده
80% انجام شده

نوار های متحرک

You can also use animated bar by just putting active class

85% انجام شده (موفقیت)
85% انجام شده (موفقیت)
85% انجام شده (موفقیت)
85% انجام شده (موفقیت)

نوار های پیشرفت عمودی

88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده

از پایین

88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده

راه راه

88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده

نوار های پیشرفت عمودی

88% تمام شده
88% تمام شده
88% تمام شده
88% تمام شده

Animated Progress bars

60% انجام شده
60% انجام شده
60% انجام شده
60% انجام شده
60% انجام شده
60% انجام شده

نوار های پیشرفته روی هم

نوار های مهارت

فتوشاپ85%
85% انجام شده (موفقیت)
Dreamweaver80%
85% انجام شده (موفقیت)
Illustrator70%
85% انجام شده (موفقیت)
Corel Draw45%
85% انجام شده (موفقیت)