درصد پیشرفت

نشانگرهای پیشرفت برای نمایش داده ها در برنامه شما
شاخص های پیشرفت پیش فرض بوت استرپ
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 0%', aria-valuenow='0', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
عرض نوار پیشرفت توسط CSS درون خطی در مثال های بالا تنظیم شده است.
درصد پیشرفت برچسب شماره
0%
25%
50%
75%
100%
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 0%', aria-valuenow='0', aria-valuemin='0', aria-valuemax='100')
        | 0%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
        | 25%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
        | 50%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | 75%
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
        | 100%
متنی را در نشانگر پیشرفت اضافه کنید تا نوار نشانگر را برچسب گذاری کنید.
رنگ های شاخص پیشرفت
پیش فرض های بوت استرپ:
اولیه
ثانویه
موفقیت
اطلاعات
اخطار
خطر
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">اولیه</div>
</div>
<div class="progress">
    <div class="progress-bar bg-secondary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">ثانویه</div>
</div>
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">موفقیت</div>
</div>
<div class="progress">
    <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">اطلاعات</div>
</div>
<div class="progress">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">اخطار</div>
</div>
<div class="progress">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">خطر</div>
</div>
.progress
    .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | اولیه
.progress
    .progress-bar.bg-secondary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | ثانویه
.progress
    .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | اطلاعات
.progress
    .progress-bar.bg-info(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | موفقیت
.progress
    .progress-bar.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | اخطار
.progress
    .progress-bar.bg-danger(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | خطر
رنگ‌های نوار پیشرفت برای تنظیم استایل رنگ خود به ابزارهای رنگ پس‌زمینه متکی هستند.
رنگ بندی توسعه داده شده:
قرمز
نارنجی
زرد
سبز
سبز روشن
فیروزه ای
آبی
نیلی آبی
بنفش
صورتی
<div class="progress">
    <div class="progress-bar bg-red" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">قرمز</div>
</div>
<div class="progress">
    <div class="progress-bar bg-orange" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">ثانویه</div>
</div>
<div class="progress">
    <div class="progress-bar bg-yellow" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">زرد</div>
</div>
<div class="progress">
    <div class="progress-bar bg-green" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">سبز</div>
</div>
<div class="progress">
    <div class="progress-bar bg-teal" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">سبز روشن</div>
</div>
<div class="progress">
    <div class="progress-bar bg-cyan" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">فیروزه ای</div>
</div>
<div class="progress">
    <div class="progress-bar bg-blue" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">آبی</div>
</div>
<div class="progress">
    <div class="progress-bar bg-indigo" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">نیلی آبی</div>
</div>
<div class="progress">
    <div class="progress-bar bg-purple" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">بنفش</div>
</div>
<div class="progress">
    <div class="progress-bar bg-pink" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">صورتی</div>
</div>
.progress
    .progress-bar.bg-red(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | قرمز
.progress
    .progress-bar.bg-orange(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | نارنجی
.progress
    .progress-bar.bg-yellow(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | زرد
.progress
    .progress-bar.bg-green(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | سبز
.progress
    .progress-bar.bg-teal(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | سبز روشن
.progress
    .progress-bar.bg-cyan(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | فیروزه ای
.progress
    .progress-bar.bg-blue(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | آبی
.progress
    .progress-bar.bg-indigo(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | نیلی آبی
.progress
    .progress-bar.bg-purple(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | بنفش
.progress
    .progress-bar.bg-pink(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        | صورتی
می‌توانید از ابزارهای پس‌زمینه سیستم رنگی توسعه‌یافته برای استایل کردن نوار پیشرفت به‌صورت غیر متنی استفاده کنید.
درصد پیشرفت راه راه
درصد پیشرفت راه راه پایه:
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
.progress
    .progress-bar.progress-bar-striped.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-info(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.bg-danger(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
از .progress-bar-striped استفاده کنید برای راه راه کردن درصد پیشرفت.
درصد پیشرفت راه راه متحرک:
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-info(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.progress
    .progress-bar.progress-bar-striped.progress-bar-animated.bg-danger(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
از کلاس .progress-bar-animated تنها با کلاس .progress-bar-striped میتوانید به درصد پیشفرت راه راه خود متحرک کنید.
درصد پیشرفت کارت
%25 پیشرفت کارت
این یک نمونه کارت با نوار پیشرفت 25% تکمیل شده است.
%50 پیشرفت کارت
این یک نمونه کارت با نوار پیشرفت 50% تکمیل شده است.
%75 پیشرفت کارت
این یک نمونه کارت با نوار پیشرفت 75% تکمیل شده است.
%100 پیشرفت کارت
این یک نمونه کارت با نوار پیشرفت 100% تکمیل شده است.
<div class="card card-progress">
    <div class="card-header text-danger">%25 پیشرفت کارت</div>
    <div class="card-body">این یک نمونه کارت با نوار پیشرفت 25% تکمیل شده است.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="card card-progress">
    <div class="card-header text-warning">%50 پیشرفت کارت</div>
    <div class="card-body">این یک نمونه کارت با نوار پیشرفت 50% تکمیل شده است.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="card card-progress">
    <div class="card-header text-primary">%75 پیشرفت کارت</div>
    <div class="card-body">این یک نمونه کارت با نوار پیشرفت 75% تکمیل شده است.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
<div class="card card-progress">
    <div class="card-header text-success">%100 پیشرفت کارت</div>
    <div class="card-body">این یک نمونه کارت با نوار پیشرفت 100% تکمیل شده است.</div>
    <div class="progress rounded-0">
        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
.card.card-progress
    .card-header.text-danger %25 پیشرفت کارت
    .card-body این یک نمونه کارت با نوار پیشرفت 25% تکمیل شده است.
    .progress.rounded-0
        .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.card.card-progress
    .card-header.text-warning %50 پیشرفت کارت
    .card-body این یک نمونه کارت با نوار پیشرفت 50% تکمیل شده است.
    .progress.rounded-0
        .progress-bar.bg-warning(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
.card.card-progress
    .card-header.text-primary %75 پیشرفت کارت
    .card-body این یک نمونه کارت با نوار پیشرفت 75% تکمیل شده است.
    .progress.rounded-0
        .progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
.card.card-progress
    .card-header.text-success %100 پیشرفت کارت
    .card-body این یک نمونه کارت با نوار پیشرفت 100% تکمیل شده است.
    .progress.rounded-0
        .progress-bar.bg-success(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
می توانید ابزارهای پس زمینه و گزینه های راه راه را با کارت های پیشرفت ترکیب کنید. کلاس .card-progress را به کلاس .card ضمیمه کنید تا تنظیمات پیش فرض نوار پیشرفت را اعمال شود.
مستندات بوت استرپ موجود است

شاخص های پیشرفت یک جزء پیش فرض هستند که در چارچوب بوت استرپ گنجانده شده است. برای اطلاعات بیشتر در مورد پیاده سازی، اصلاح و گسترش استفاده از شاخص های پیشرفت در پروژه خود، از صفحه مستندسازی پیشرفت بوت استرپ رسمی دیدن کنید.

از Bootstrap Progress Docs دیدن کنید