Progress Bar برای نمایش میزان پیشرفت یک فرایند (مثل دانلود فایل، آپلود، انجام یک کار) استفاده میشه.

📌 1. Progress Bar ساده

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

🔹 width مقدار پیشرفت رو مشخص می‌کنه (اینجا ۵۰٪).

📌 2. Progress Bar با متن

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

🔹 میشه درصد یا متن دلخواه داخل Progress Bar نوشت.

📌 3. رنگ‌های مختلف Progress Bar

<div class="progress my-2">
  <div class="progress-bar bg-success" style="width: 40%">Success</div>
</div>
<div class="progress my-2">
  <div class="progress-bar bg-info" style="width: 60%">Info</div>
</div>
<div class="progress my-2">
  <div class="progress-bar bg-warning" style="width: 80%">Warning</div>
</div>
<div class="progress my-2">
  <div class="progress-bar bg-danger" style="width: 90%">Danger</div>
</div>

📌 4. Progress Bar با نوار راه‌راه (Striped)

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

🔹 با کلاس progress-bar-striped نوار راه‌راه میشه.

📌 5. Progress Bar متحرک (Animated)

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

🔹 با progress-bar-animated نوار پیشرفت به صورت متحرک حرکت می‌کنه.

📌 6. چند Progress Bar در یک نوار

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

🔹 میشه چند تا Progress Bar رو داخل یک progress قرار داد.

✨ خلاصه:

• progress → کانتینر اصلی

• progress-bar → نوار پیشرفت

• width → میزان پیشرفت

• bg-* → رنگ‌ها

• progress-bar-striped → راه‌راه

• progress-bar-animated → متحرک