BS4 spinnerlar
Spinnerlar
Spinner (yuklanish indikatori) yaratish uchun .spinner-border klassidan foydalaning:
Loading..
Rangli spinnerlar
Spinnerga rang berish uchun istalgan matn rangi yordamchi klassidan foydalaning:
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Misol
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
O‘zingiz sinab ko‘ring »
O‘suvchi spinnerlar
Agar spinner (yuklanish indikatori) "aylanish" o‘rniga kattalashib borishini istasangiz, .spinner-grow klassidan foydalaning:
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Misol
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
O‘zingiz sinab ko‘ring »
Spinner o‘lchami
Kichikroq spinner yaratish uchun .spinner-border-sm yoki .spinner-grow-sm dan foydalaning:
Loading..
Loading..
Misol
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
O‘zingiz sinab ko‘ring »
Spinnerli tugmalar
Spinnerlarni tugmaga matn bilan yoki matnsiz ham qo‘shishingiz mumkin:
Misol
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!