نوار پیشرفت

توضیحات

نمونه هایی برای نمایش صفحه بندی برای نشان دادن یک سری محتوای مرتبط در چندین صفحه وجود دارد.

علاوه بر این، از آنجایی که صفحات امکان دارد بیش از یک بخش داشته باشد، توصیه می‌شود یک برچسب aria-label برای <nav> ارائه شود تا هدف آن را منعکس کند به عنوان مثال، صفحه بندی ای برای پیمایش بین مجموعه ای از نتایج جستجو باید،یک برچسب مناسب مثلا aria-label="Search results pages" استفاده شود.

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

با Label

افزودن عنوان یا متن دلخواه روی المانی با کلاس .progress-bar

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

تغییر ارتفاع

ما فقط مقدار height را روی .progress تغییر می دهیم، و ارتفاع .progress-bar نیز به طور خودکار تغییر خواهد کرد.

<div class="progress mt-3" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

پس زمینه

از کلاس های مربوط به پس زمینه برای تغییر ظاهر progress bar می توانید استفاده کنید.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <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 mt-3">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

نوار چندگانه

در صورت نیاز می توانید چندین پروگرس بار را در داخل یک پروگرس قرار دهید.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Striped

افزودن .progress-bar-striped به هر .progress-bar برای تغییر پس زمینه بصورت گرادیان

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mt-3">
  <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 mt-3">
  <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 mt-3">
  <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 mt-3">
  <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>

Striped متحرک

گرادیان می تواند متحرک شود، باید کلاس .progress-bar-animated به .progress-bar اضافه کنید.

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

نمایش درصد نسخه 1

میزان پیشرفت
85% 
<h6 class="uppercase">میزان پیشرفت</h6>
<div class="progress progress-sm bg-primary bg-opacity-10">
	<div class="progress-bar bg-primary" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
		<span class="progress-percent-simple ms-auto">85%</span>
	</div>
</div>

نمایش درصد نسخه 2

میزان پیشرفت

80%
<p class="mb-1 mt-3 text-dark">میزان پیشرفت</p>
<div class="progress progress-percent-bg">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><span class="progress-percent">80%</span></div>
</div>