نوارهای پیشرفت (Progress Bars)

نوار پیشرفت بوت استرپ مثل خط پرشدن بازی است. «نوار پیشرفت (Progress Bar)» مقدار انجام کار را نشان می دهد و با عرض (Width) کنترل می شود.

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

یک ظرف با کلاس .progress بساز. سپس یک فرزند با کلاس .progress-bar بگذار. با ویژگی width مقدار پیشرفت را تعیین کن.

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

مشاهده در ادیتور

تغییر ارتفاع نوار

ارتفاع پیش فرض 1rem است. با height ارتفاع را عوض کن.

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;"></div>
</div>

مشاهده در ادیتور

برچسب درصد داخل نوار

متن درصد را داخل .progress-bar بگذار تا مقدار دیده شود.

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

مشاهده در ادیتور

نوارهای رنگی

برای رنگ ها از کلاس های زمینه .bg-* استفاده کن؛ مثل .bg-success یا .bg-danger.

<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

مشاهده در ادیتور

نوار راه راه (Striped)

با کلاس .progress-bar-striped طرح راه راه اضافه کن تا نوار فعال تر دیده شود.

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

مشاهده در ادیتور

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

با .progress-bar-animated حرکت به نوار بده. برای فرآیندهای در حال اجرا عالی است.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>

مشاهده در ادیتور

پشته کردن چند نوار

چند .progress-bar را کنار هم داخل یک .progress بگذار تا بخش ها را نشان دهی.

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

مشاهده در ادیتور

نکته: برای نمایش وضعیت اعلان ها می توانی از نشان ها کمک بگیری. همچنین برای حالت «در حال بارگذاری» از اسپینرها استفاده کن. این بخش با عبارت نوارهای پیشرفت بوت استرپ هم لینک داخلی دارد.

گام های تمرینی

1. یک نوار 30٪ بساز و رنگ را آبی بگذار.
2. ارتفاع را به 20px تغییر بده.
3. نوار راه راه و متحرک را فعال کن.

جمع بندی سریع

• .progress ظرف نوار است.
• .progress-bar نوار داخلی است.
• width مقدار پیشرفت را تعیین می کند.
• .bg-* رنگ را مشخص می کند.
• .striped و .animated جلوه پویا می دهند.