แถบ ความคืบหน้า W3.CSS
แถบความคืบหน้าสามารถใช้เพื่อแสดงว่าผู้ใช้อยู่ในกระบวนการได้ไกลแค่ไหน:
แถบความคืบหน้าขั้นพื้นฐาน
สามารถใช้องค์ประกอบ <div> ปกติสำหรับแถบความคืบหน้า
คุณสมบัติความกว้าง CSS สามารถใช้เพื่อกำหนดความสูงและความกว้างของแถบความคืบหน้า
ตัวอย่าง
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
แถบความคืบหน้ากว้าง
เปลี่ยนความกว้างของแถบความคืบหน้าด้วย คุณสมบัติ ความกว้าง CSS (จาก 0 เป็น 100%):
ตัวอย่าง
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
สีแถบความคืบหน้า
ใช้ คลาส สี w3-เพื่อเปลี่ยนสีของแถบความคืบหน้า:
ตัวอย่าง
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
ป้ายแถบความคืบหน้า
เพิ่มข้อความภายใน องค์ประกอบ w3-containerเพื่อเพิ่มป้ายกำกับในแถบความคืบหน้า
ใช้ คลาส w3-centerเพื่อจัดป้ายกำกับให้อยู่ตรงกลาง หากละเว้น จะจัดชิดซ้าย
ตัวอย่าง
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
ขนาดข้อความแถบความคืบหน้า
ใช้ คลาส ขนาด w3-เพื่อเปลี่ยนขนาดข้อความในคอนเทนเนอร์:
ตัวอย่าง
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
แถบความคืบหน้า
ใช้ คลาส w3-paddingเพื่อเพิ่มช่องว่างภายในคอนเทนเนอร์
ตัวอย่าง
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
แถบความคืบหน้าโค้งมน
ใช้ คลาส w3-roundเพื่อเพิ่มมุมโค้งมนในแถบความคืบหน้า:
ตัวอย่าง
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
แถบความคืบหน้าแบบไดนามิก
ใช้ JavaScript เพื่อสร้างแถบความคืบหน้าแบบไดนามิก:
ตัวอย่าง
<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() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
แถบความคืบหน้าแบบไดนามิกพร้อมป้ายกำกับ
ป้ายกึ่งกลาง:
ตัวอย่าง
ป้ายชิดซ้าย:
ตัวอย่าง
ป้ายกำกับนอกแถบความคืบหน้า:
ตัวอย่าง
20%
อีกตัวอย่างหนึ่ง (ขั้นสูง):
ตัวอย่าง
Added 0 of 10 photos