نوارهای پیشرفت پیش فرض
سبک نوار پیشرفت پیش‌فرض
<div class="progress">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>نوار پیشرفت راه راه
برای تغییر سبک، .progress-bar-striped را اضافه کنید
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%; height:10px;" role="progressbar">
<span class="sr-only">85% کامل (موفقیت)</span>
</div>
</div>نوار پیشرفت رنگی
برای تغییر سبک، bg-primary, .bg-danger, .bg-info را اضافه کنید
<div class="progress mt-3">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success" style="width: 20%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary" style="width: 30%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning" style="width: 80%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-inverse" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>اندازه های مختلف نوار
برای تغییر سبک، bg-primary, .bg-danger, .bg-info را اضافه کنید
<div class="progress mt-3">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>نوار راه راه متحرک
برای تغییر سبک، bg-primary, .bg-danger, .bg-info را اضافه کنید
<div class="progress mt-3">
<div class="progress-bar active progress-bar-striped bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info active progress-bar-striped" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success active progress-bar-striped" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary active progress-bar-striped" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning active progress-bar-striped" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>نوارهای پیشرفت عمودی
برای تغییر سبک، .progress-vertical را اضافه کنید
<div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
پیشرفت عمودی از پایین
برای تغییر سبک، .progress-vertical را اضافه کنید
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>نوارهای پیشرفت اندازه های مختلف
برای تغییر سبک، .progress-vertical را اضافه کنید
<div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:6px; height:80%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:8px; height:60%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:10px; height:40%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:14px; height:30%;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>میله های متحرک
برای تغییر سبک، .progress-vertical را اضافه کنید
<div class="progress mt-3">
<div class="progress-bar bg-danger progress-animated" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info progress-animated" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success progress-animated" style="width: 20%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary progress-animated" style="width: 30%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning progress-animated" style="width: 80%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-inverse progress-animated" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
میله های مهارت
.progress-animated را برای تغییر سبک اضافه کنید
فتوشاپ 85%
ویرایشگر کد 90%
تصویرگر 65%
<h6>فتوشاپ
<span class="pull-end">85%</span>
</h6>
<div class="progress ">
<div class="progress-bar bg-danger progress-animated" style="width: 85%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<h6 class="mt-4">ویرایشگر کد
<span class="pull-end">90%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-info progress-animated" style="width: 90%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>
<h6 class="mt-4">تصویرگر
<span class="pull-end">65%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-success progress-animated" style="width: 65%; height:6px;" role="progressbar">
<span class="sr-only">60% کامل</span>
</div>
</div>