اسپینرها برای نمایش وضعیت در حال بارگذاری (Loading) استفاده میشن.

Bootstrap دو نوع Spinner داره:
✅ Border Spinner (دایره‌ای با کادر)
✅ Grow Spinner (دایره‌ای که بزرگ و کوچک میشه)

📌 1. Spinner ساده (Border Spinner)

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

🔹 spinner-border → اسپینر دایره‌ای
🔹 visually-hidden → متن فقط برای دسترس‌پذیری (Screen Reader).

📌 2. رنگ‌های مختلف Spinner

<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>

🔹 با کلاس‌های رنگی مثل text-primary یا text-danger میشه رنگ اسپینر رو تغییر داد.

📌 3. Grow Spinner

<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>

🔹 اسپینری که به جای چرخش، بزرگ و کوچک میشه.

📌 4. اندازه‌های مختلف Spinner

<div class="spinner-border spinner-border-sm text-primary"></div>
<div class="spinner-grow spinner-grow-sm text-success"></div>

🔹 -sm → اسپینر کوچک‌تر.

📌 5. اسپینر داخل دکمه

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading...
</button>

<button class="btn btn-success" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  در حال بارگذاری
</button>

🔹 اسپینر رو میشه داخل دکمه‌ها گذاشت.

✨ خلاصه:

• spinner-border → اسپینر چرخشی

• spinner-grow → اسپینر بزرگ‌شونده

• text-* → رنگ‌ها

• -sm → سایز کوچک

• میشه توی دکمه، کارت یا فرم‌ها استفاده کرد.