แถบความคืบหน้า
แถบความคืบหน้าสามารถใช้ในการแสดงให้เห็นว่าไกลพร้อมผู้ใช้ที่อยู่ในกระบวนการที่:
พื้นฐานแถบความคืบหน้า
ชั้น W3 ความคืบหน้าในภาชนะกำหนดภาชนะสำหรับแถบความคืบหน้าและ W3-ProgressBar กำหนดแถบความคืบหน้าเกิดขึ้นจริง (ที่ "เต็ม" พื้นที่) ตั้งค่าความกว้างของแถบความคืบหน้ากับอสังหาริมทรัพย์กว้าง CSS ที่:
ตัวอย่าง
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>ความคืบหน้าขนาดบาร์
กำหนดความกว้าง / ขนาดของแถบความคืบหน้ากับค่าเปอร์เซ็นต์จาก 0 ถึง 100%
ตัวอย่าง
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>สีแถบความคืบหน้า
โดยค่าเริ่มต้นสีของ W3 ความคืบหน้าในภาชนะเป็นสีเทาอ่อนและ W3-ProgressBar เป็นสีเทา:
เปลี่ยนสีของพวกเขากับใด ๆ ของการเรียนสี W3.CSS นี้:
ตัวอย่าง
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>โค้งมนแถบความคืบหน้า
ใช้ใด ๆ ของการเรียน W3 รอบเพื่อเพิ่มมุมโค้งมนกับบาร์คืบหน้าของคุณ:
ตัวอย่าง
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>ฉลากแถบความคืบหน้า
เพิ่มองค์ประกอบใหม่ภายใน "W3-ProgressBar" เพื่อเพิ่มป้ายกำกับกับแถบความคืบหน้า
เคล็ดลับ: การใช้คลาส W3-ศูนย์เสมอฉลากศูนย์กลาง หากละเว้นก็จะถูกทิ้งชิด
ตัวอย่าง
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>แบบไดนามิกแถบความคืบหน้า
ใช้ JavaScript ในการสร้างแถบความคืบหน้าแบบไดนามิก:
ตัวอย่าง
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" 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>แบบไดนามิกแถบความคืบหน้ากับป้ายกำกับ
ป้าย Centered:
จัดชิดซ้ายป้ายชื่อ:
ติดป้ายที่ด้านนอกของแถบความคืบหน้า: