BS4 progress barlar
Oddiy progress bar
Progress bar foydalanuvchiga jarayonning qaysi bosqichida ekanini ko‘rsatish uchun ishlatilishi mumkin.
Standart progress bar yaratish uchun konteyner elementga .progress klassini, uning ichki (farzand) elementiga esa .progress-bar klassini qo‘shing. Progress bar kengligini belgilash uchun CSS width xususiyatidan foydalaning:
Misol
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
O‘zingiz sinab ko‘ring »
Progress bar balandligi
Standart holatda progress bar balandligi 16px ga teng. Uni o‘zgartirish uchun CSS height xususiyatidan foydalaning. E’tibor bering, progress konteyneri va progress bar uchun bir xil balandlik belgilashingiz kerak:
Misol
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
O‘zingiz sinab ko‘ring »
Progress bar yorliqlari
Bajarilgan foizni ko‘rsatish uchun progress bar ichiga matn qo‘shing:
Misol
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
O‘zingiz sinab ko‘ring »
Rangli progress barlar
Standart holatda progress bar ko‘k (primary) rangda bo‘ladi. Uning rangini o‘zgartirish uchun istalgan Bootstrap 4 kontekstual fon klassidan foydalaning:
Misol
<!-- Blue -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grey -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Light Grey -->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
O‘zingiz sinab ko‘ring »
Yo‘l-yo‘l progress barlar
Progress barlarga yo‘l-yo‘l chiziqlar qo‘shish uchun .progress-bar-striped klassidan foydalaning:
Misol
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
O‘zingiz sinab ko‘ring »
Animatsiyali progress bar
Progress barni animatsiyali qilish uchun .progress-bar-animated klassini qo‘shing:
Misol
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
O‘zingiz sinab ko‘ring »
Bir nechta progress bar
Progress barlarni bitta chiziqda ketma-ket joylashtirish ham mumkin:
Misol
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!