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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


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

نوار پیشرفت را می‌توان برای نشان دادن اینکه کاربر چه میزان پردازش داشته به کار برد.[۱]

بوت استرپ انواع بسیاری از نوارهای پیشرفت دارد.

یک نوار پیشرفت پیش فرض در بوت استرپ اینگونه است:


برای ایجاد یک نوار پیشرفت پیش فرض، کلاس .progress را به عنصر <div> اضافه کنید:

مثال

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


مشاهدهٔ نتیجه


توجه: نوارهای پیشرفت در Internet Explorer 9 و قدیمی‌تر پشتیبانی نمی‌شوند (زیرا آنها از انیمیشن‌ها و تراکنش‌های CSS3 برای دستیابی به برخی از نتایج‌شان استفاده می‌کنند).
توجه: برای بهبود دسترسی افرادی که از صفحه خوان‌ها (Screen Readers) استفاده می‌کنند، باید ویژگی‌های aria-* را اضافه کنید.

نوار پیشرفت با برچسب

نوار پیشرفت با یک برچسب اینگونه است:


برای نمایش درصد پیشرفت، کلاس .sr-only را از نوار پیشرفت حذف کنید:

مثال

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>


مشاهدهٔ نتیجه


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

کلاس‌های متنی برای فراهم کردن «مفهوم از طریق رنگ‌ها» استفاده می‌شوند.

کلاس‌های متنی که می‌توانند با نوار پیشرفت به کار روند عبارتند از:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger


مثال زیر نحوه ایجاد نوارهای پیشرفت با کلاس‌های متنی متفاوت را نمایش می‌دهد:

مثال

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>


مشاهدهٔ نتیجه


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

نوارهای پیشرفت هم می‌توانند راه راه باشند:


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

مثال

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>


مشاهدهٔ نتیجه


نوار پیشرفت متحرک

کلاس .active را بمنظور متحرک ساختن نوار پیشرفت به کار ببرید:

مثال

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>


مشاهدهٔ نتیجه


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

نوارهای پیشرفت می‌توانند به صورت پشته ای روی هم باشند:


نوار پیشرفت پشته ای را با قرار دادن چند بار در یک تگ <div class="progress"> ایجاد کنید:

مثال

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


مشاهدهٔ نتیجه


منابع آموزشی