Spinnerlar
To'liq HTML, CSS va JavaScript-dan foydalanmasdan yaratilgan Bootstrap spinnerlari bilan komponent yoki sahifaning yuklanish holatini ko'rsating.
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="sr-only">Loading...</span>
.
prefers-reduced-motion
media so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang
.
Chegarani aylantiruvchi
Yengil yuk ko'rsatkichi uchun chegara spinnerlaridan foydalaning.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Ranglar
Chegara spinner currentColor
o'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.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
kommunal xizmatlardan foydalanmaslik kerak? Har bir chegara spinneri
transparent
kamida 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!
<div class="spinner-grow" role="status">
<span class="sr-only">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.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Hizalama
rem
Bootstrap'dagi spinnerlar s, currentColor
va 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
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Joylashtirish
Spinnerlarni istalgan vaziyatda kerakli joyga joylashtirish uchun flexbox utilitlari , float utilitlari yoki matnni tekislash yordam dasturlaridan foydalaning.
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Floats
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Matnni tekislash
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Hajmi
Qo'shing .spinner-border-sm
va .spinner-grow-sm
boshqa komponentlar ichida tezda ishlatilishi mumkin bo'lgan kichikroq spinner qilish uchun.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Yoki kerak bo'lganda o'lchamlarni o'zgartirish uchun maxsus CSS yoki inline uslublaridan foydalaning.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
Tugmalar
Harakat bajarilayotgan yoki amalga oshirilayotganini bildirish uchun tugmalar ichidagi spinnerlardan foydalaning. Shuningdek, matnni spinner elementidan almashtirishingiz va kerak bo'lganda tugma matnidan foydalanishingiz mumkin.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">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="sr-only">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>