Thanh tiến trình W3.CSS
Thanh tiến trình có thể được sử dụng để hiển thị mức độ tiến triển của người dùng trong một quy trình:
Thanh tiến trình cơ bản
Phần tử <div> bình thường có thể được sử dụng cho thanh tiến trình.
Thuộc tính CSS width có thể được sử dụng để đặt chiều cao và chiều rộng của thanh tiến trình.
Ví dụ
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Chiều rộng thanh tiến trình
Thay đổi độ rộng của thanh tiến trình bằng thuộc tính CSS width (từ 0 đến 100%):
Ví dụ
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Màu thanh tiến trình
Sử dụng các lớp màu w3- để thay đổi màu của thanh tiến trình:
Ví dụ
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Nhãn thanh tiến trình
Thêm văn bản bên trong phần tử vùng chứa w3 để thêm nhãn vào thanh tiến trình.
Sử dụng lớp w3-center để căn giữa nhãn. Nếu bỏ qua, nó sẽ được căn trái.
Ví dụ
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Kích thước văn bản trên thanh tiến trình
Sử dụng các lớp kích thước w3- để thay đổi kích thước văn bản trong vùng chứa:
Ví dụ
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Đệm thanh tiến trình
Sử dụng các lớp đệm w3 để thêm phần đệm vào vùng chứa.
Ví dụ
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Thanh tiến trình làm tròn
Sử dụng các lớp w3-round để thêm các góc tròn vào thanh tiến trình:
Ví dụ
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Thanh tiến trình động
Sử dụng JavaScript để tạo thanh tiến trình động:
Ví dụ
<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>
Thanh tiến trình động có nhãn
Nhãn căn giữa:
Nhãn căn trái:
Nhãn bên ngoài thanh tiến trình:
Một ví dụ khác (nâng cao):