اسپنر

بوٽ اسٽريپ اسپنرز سان مڪمل طور تي HTML، CSS، ۽ بغير جاوا اسڪرپٽ سان ٺهيل جزو يا صفحي جي لوڊ ٿيڻ واري حالت کي ظاهر ڪريو.

هن صفحي تي

بابت

بوٽ اسٽراپ ”اسپنرز“ استعمال ڪري سگھجن ٿا توهان جي منصوبن ۾ لوڊشيڊنگ جي حالت ڏيکارڻ لاءِ. اهي صرف HTML ۽ CSS سان ٺهيل آهن، مطلب ته توهان کي انهن کي ٺاهڻ لاءِ ڪنهن جاوا اسڪرپٽ جي ضرورت ناهي. تنهن هوندي به، توهان کي ڪجهه ڪسٽم جاوا اسڪرپٽ جي ضرورت پوندي انهن جي نمائش کي ٽوگل ڪرڻ لاء. انهن جي ظاهر، ترتيب، ۽ سائيز اسان جي شاندار افاديت جي طبقن سان آساني سان ترتيب ڏئي سگهجي ٿي.

پهچ جي مقصدن لاءِ، هر لوڊر هتي شامل آهي role="status"۽ هڪ nested <span class="visually-hidden">Loading...</span>.

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

بارڊر اسپنر

بارڊر اسپنر استعمال ڪريو ھڪڙو ھلڪو وزن لوڊ ڪرڻ واري اشاري لاءِ.

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

رنگ

بارڊر اسپنر currentColorان جي لاءِ استعمال ڪري ٿو border-color، مطلب ته توهان ٽيڪسٽ رنگ جي افاديت سان رنگ کي ترتيب ڏئي سگهو ٿا . توهان معياري اسپنر تي اسان جي ڪنهن به ٽيڪسٽ رنگ جي افاديت استعمال ڪري سگهو ٿا.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

افاديت ڇو نه استعمال ڪريو border-color؟ هر بارڊر اسپنر transparentگهٽ ۾ گهٽ هڪ پاسي لاءِ سرحد بيان ڪري ٿو، تنهن ڪري .border-{color}افاديت ان کي ختم ڪري ڇڏيندي.

وڌندڙ اسپنر

جيڪڏهن توهان سرحد اسپنر کي پسند نٿا ڪريو، وڌو اسپنر ڏانهن وڃو. جيتوڻيڪ اهو ٽيڪنيڪل طور تي اسپن نٿو ڪري، اهو بار بار وڌندو آهي!

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

هڪ ڀيرو ٻيهر، هي اسپنر سان ٺهيل آهي currentColor، تنهنڪري توهان آساني سان متن جي رنگ جي افاديت سان ان جي ظاهر کي تبديل ڪري سگهو ٿا . هتي اهو نيري ۾ آهي، سپورٽ ٿيل مختلف قسمن سان گڏ.

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ترتيب ڏيڻ

بوٽ اسٽراپ ۾ اسپنر rems currentColor، ۽ display: inline-flex. هن جو مطلب آهي ته اهي آساني سان ٻيهر ترتيب ڏئي سگهجن ٿيون، ٻيهر رنگ، ۽ جلدي ترتيب ڏنل.

مارجن

مارجن يوٽيلٽيز استعمال ڪريو جيئن .m-5آسان اسپيسنگ لاءِ.

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

جڳت

استعمال ڪريو flexbox utilities , float utilities , or text alignment utilities to place the spinners بلڪل جتي توھان کي انھن جي ڪنھن به حالت ۾ ضرورت آھي.

فليڪس

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

لوڊ ٿي رهيو آهي...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

ترندو

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

متن جي ترتيب

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

ماپ

شامل ڪريو .spinner-border-sm۽ .spinner-grow-smھڪڙو ننڍڙو اسپنر ٺاھيو جيڪو جلدي استعمال ڪري سگھجي ٿو ٻين حصن ۾.

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

يا، ضرورت مطابق طول و عرض تبديل ڪرڻ لاءِ ڪسٽم CSS يا ان لائن اسلوب استعمال ڪريو.

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

بٽڻ

بٽڻن جي اندر اسپنر استعمال ڪريو انهي کي ظاهر ڪرڻ لاءِ ته ڪو عمل في الحال پروسيسنگ يا ٿي رهيو آهي. توھان پڻ متن کي تبديل ڪري سگھوٿا اسپنر عنصر مان ۽ استعمال ڪريو بٽڻ متن جي ضرورت مطابق.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

ساس

متغير

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

ڪي فريم

اسان جي اسپنرز لاءِ CSS متحرڪ ٺاهڻ لاءِ استعمال ٿيل. ۾ شامل scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}