Thanh tiến trình W3.CSS
Một thanh tiến trình có thể được sử dụng để cho biết người dùng đã đi được bao xa trong một quá trình:
Thanh tiến trình cơ bản
Một phần tử <div> bình thường có thể được sử dụng cho thanh tiến trình.
Thuộc tính chiều rộng CSS có thể được sử dụng để đặt chiều cao và chiều rộng của thanh tiến trình.
Thí 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 chiều rộng của thanh tiến trình với thuộc tính chiều rộng CSS (từ 0 đến 100%):
Thí 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:
Thí 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ử w3-container để 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.
Thí 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 w3- size để thay đổi kích thước văn bản trong vùng chứa:
Thí 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 w3-padding để thêm padding vào vùng chứa.
Thí 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:
Thí 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:
Thí 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:
Thí dụ
Nhãn căn trái:
Thí dụ
Nhãn bên ngoài thanh tiến trình:
Thí dụ
20%
Một ví dụ khác (nâng cao):
Thí dụ
Added 0 of 10 photos