W3.CSS progress barlar
Progress bar nima?
Progress barlar vazifa yoki jarayon qanchalik bajarilganini ko‘rsatadi.
W3.CSS progress barlarni ranglar, yorliqlar, ichki bo‘shliq (padding) va yumaloq burchaklar bilan bezashni osonlashtiradi.
Oddiy progress bar
Progress bar uchun oddiy <div> elementidan foydalanish mumkin.
Jarayonni boshqarish uchun CSS’ning width xususiyatidan foydalaning.
Misol
<div class="w3-border">
<div class="w3-grey" style="height:32px;width:20%"></div>
</div>
Progress bar kengligi
Jarayonni CSS’ning width xususiyati orqali 0% dan 100% gacha o‘zgartiring:
Misol
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Progress bar ranglari
Progress bar rangini o‘zgartirish uchun w3-color klasslaridan foydalaning:
Misol
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Progress bar yorliqlari
Progress barga yorliq qo‘shish uchun w3-container elementi ichiga matn qo‘shing.
Yorliqni markazga joylashtirish uchun w3-center dan foydalaning.
Misol
<div class="w3-light-grey">
<div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Progress bar ichki bo‘shlig‘i
Balandlikni o‘zgartirish uchun w3-padding-small, w3-padding va w3-padding-large kabi W3.CSS padding klasslaridan foydalaning.
Misol
<div class="w3-light-grey">
<div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Progress bar matn o‘lchami
Matn o‘lchamini o‘zgartirish uchun w3-tiny, w3-large va w3-xlarge kabi W3.CSS o‘lcham klasslaridan foydalaning:
Misol
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Yumaloq burchakli progress barlar
Progress barga yumaloq burchaklar qo‘shish uchun w3-round klasslaridan foydalaning:
Misol
<div class="w3-light-grey w3-round">
<div class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dinamik progress bar
Dinamik progress bar yaratish uchun JavaScript’dan foydalaning:
Misol
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green" style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>
<script>
function move() {
const elem = document.getElementById("myBar");
let width = 1;
const id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Yorliqli dinamik progress bar
Markazdagi yorliq:
Chapga tekislangan yorliq:
Progress bardan tashqaridagi yorliq:
Yana bir misol (murakkabroq):
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!