Spinnerlar

To'liq HTML, CSS va JavaScript-siz yaratilgan Bootstrap spinnerlari bilan komponent yoki sahifaning yuklanish holatini ko'rsating.

Ushbu sahifada

Haqida

Bootstrap "spinners" loyihalaringizda yuklanish holatini ko'rsatish uchun ishlatilishi mumkin. Ular faqat HTML va CSS bilan yaratilgan, ya'ni ularni yaratish uchun sizga hech qanday JavaScript kerak emas. Biroq, ularning ko'rinishini almashtirish uchun sizga ba'zi maxsus JavaScript kerak bo'ladi. Ularning tashqi ko'rinishi, hizalanishi va o'lchamlarini bizning ajoyib yordamchi sinflarimiz bilan osongina sozlash mumkin.

Mavjud imkoniyatlar uchun bu yerdagi har bir yuklovchi oʻz ichiga role="status"va oʻrnatilgan <span class="visually-hidden">Loading...</span>.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang .

Chegarani aylantiruvchi

Yengil yuk ko'rsatkichi uchun chegara spinnerlaridan foydalaning.

html

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

Ranglar

Chegara spinner currentColoro'z uchun foydalanadi border-color, ya'ni matn rangi yordam dasturlari yordamida rangni sozlashingiz mumkin . Siz standart spinnerda har qanday matn rangi yordam dasturlaridan foydalanishingiz mumkin.

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>

Nega border-colorkommunal xizmatlardan foydalanmaslik kerak? Har bir chegara spinneri transparentkamida bir tomon uchun chegarani belgilaydi, shuning uchun .border-{color}yordamchi dasturlar buni bekor qiladi.

O'sayotgan spinner

Agar siz chegara spinnerini yoqtirmasangiz, o'stirishga o'ting. Texnik jihatdan aylanmasa-da, u qayta-qayta o'sib boradi!

html

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

Yana bir bor, bu spinner bilan qurilgan , shuning uchun matn rangi yordam dasturlaricurrentColor yordamida uning ko'rinishini osongina o'zgartirishingiz mumkin . Bu erda u ko'k rangda, qo'llab-quvvatlanadigan variantlar bilan birga.

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>

Hizalama

remBootstrap'dagi spinnerlar s, currentColorva bilan qurilgan display: inline-flex. Bu ularning o'lchamlarini osongina o'zgartirishi, rangini o'zgartirishi va tezda tekislanishi mumkinligini anglatadi.

Marja

Oson bo'sh joy uchun margin yordam dasturidan foydalaning ..m-5

html

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

Joylashtirish

Spinnerlarni istalgan vaziyatda kerakli joyga joylashtirish uchun flexbox utilitlari , float utilitlari yoki matnni tekislash yordam dasturlaridan foydalaning.

Flex

html

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

Yuklanmoqda...

html

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

Floats

html

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

Matnni tekislash

html

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

Hajmi

Qo'shing .spinner-border-smva .spinner-grow-smboshqa komponentlar ichida tezda ishlatilishi mumkin bo'lgan kichikroq spinner qilish uchun.

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>

Yoki kerak bo'lganda o'lchamlarni o'zgartirish uchun maxsus CSS yoki inline uslublaridan foydalaning.

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>

Tugmalar

Harakat hozirda bajarilayotgan yoki amalga oshirilayotganini bildirish uchun tugmalar ichidagi spinnerlardan foydalaning. Shuningdek, matnni spinner elementidan almashtirishingiz va kerak bo'lganda tugma matnidan foydalanishingiz mumkin.

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>

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida spinnerlar endi mahalliy CSS o'zgaruvchilaridan real vaqt rejimida yaxshilangan sozlash uchun .spinner-borderfoydalanadilar . .spinner-growCSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

Border spinner o'zgaruvchilari:

  --#{$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;

O'sib borayotgan spinner o'zgaruvchilari:

  --#{$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;

Ikkala spinner uchun kichik spinner modifikatorlari sinflari kerak bo'lganda ushbu CSS o'zgaruvchilari qiymatlarini yangilash uchun ishlatiladi. Masalan, .spinner-border-smsinf quyidagilarni bajaradi:

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

Sass o'zgaruvchilari

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

Asosiy kadrlar

Spinnerlarimiz uchun CSS animatsiyalarini yaratish uchun foydalaniladi. ga kiritilgan scss/_spinners.scss.

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

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