اسپنر

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

هن صفحي تي

بابت

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

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

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

بارڊر اسپنر

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

html

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

رنگ

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

html

<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}افاديتون ان کي ختم ڪري ڇڏينديون.

وڌندڙ اسپنر

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

html

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

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

html

<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آسان اسپيسنگ لاءِ.

html

<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 بلڪل جتي توھان کي انھن جي ڪنھن به حالت ۾ ضرورت آھي.

فليڪس

html

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

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

html

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

ترندو

html

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

متن جي ترتيب

html

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

ماپ

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

html

<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 يا ان لائن اسلوب استعمال ڪريو.

html

<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>

بٽڻ

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

html

<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>

html

<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>

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

Bootstrap جي ترقي ڪندڙ CSS متغير جي نقطي جي حصي جي طور تي، اسپنر ھاڻي مقامي CSS متغير استعمال ڪن ٿا .spinner-border۽ .spinner-growان لاءِ بھترين حقيقي وقت جي ڪسٽمائيزيشن لاءِ. CSS متغيرن لاءِ قيمتون Sass ذريعي سيٽ ڪيون ويون آهن، تنهن ڪري Sass ڪسٽمائيزيشن اڃا به سپورٽ ٿيل آهي.

بارڊر اسپنر متغير:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

وڌندڙ اسپنر متغير:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

ٻنهي اسپنرن لاءِ، ننڍڙا اسپنر موڊيفائر ڪلاس استعمال ڪيا ويندا آهن انهن CSS متغيرن جي قدرن کي اپڊيٽ ڪرڻ لاءِ جيئن ضرورت هجي. مثال طور، .spinner-border-smڪلاس هيٺ ڏنل ڪم ڪندو آهي:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

سس متغير

$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;
  }
}