Bootstrap: Thanh tiến trình (Progress bars)
Giải phóng thời gian, khai phóng năng lực
Cung cấp phản hồi được cập nhật liên tục theo tiến trình của một luồng xử lý hoặc hành động bằng cách sử dụng thanh tiến trình đơn giản mà linh hoạt.
Tính tương thích với các trình duyệt
Thanh tiến trình sử dụng CSS3 transition và animation để tạo ra hiệu ứng. Các thuộc tính này không được hỗ trợ trong trình duyệt Internet Explorer 9 (cũng như các phiên bản cũ hơn) hoặc các phiên bản cũ của trình duyệt Firefox. Ngoài ra, trình duyệt Opera cũng không hỗ trợ animation.
Ví dụ cơ bản
Thanh tiến trình mặc định
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Thanh tiến trình có gắn nhãn
Hãy xóa bỏ class .sr-only
bên trong thanh tiến trình để hiển thị giá trị phần trăm đạt được. Đối với các giá trị phần trăm nhỏ, hãy cân nhắc sử dụng min-width
để chắc chắn rằng nhãn sẽ được hiển thị đầy đủ.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Giá trị phần trăm nhỏ
Thanh tiến trình hiển thị giá trị phần trăm nhỏ dưới dạng số có một chữ số, như 0%, và thiết lập min-width: 20px;
để đảm bảo giá trị phần trăm sẽ được hiển thị đầy đủ.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
2%
</div>
</div>
Các thanh tiến trình theo ngữ cảnh
Thanh tiến trình cũng sử dụng các class theo ngữ cảnh tương tự như đối với nút và tin nhắn thông báo để đảm bảo tính thông nhất về style.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>
Thanh tiến trình dạng kẻ sọc
Thanh tiến trình dạng kẻ sọc được tạo ra bằng cách sử dụng gradient, vì thế thanh tiến trình loại này không được hỗ trợ trong trình duyệt Internet Explorer 8.
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Thanh tiến trình có hiệu ứng động
Hãy thêm .active
vào .progress-striped
để tạo hiệu ứng chuyển động cho kẻ sọc theo chiều từ trái sang phải. Thanh tiến trình này không được hỗ trợ trong trình duyệt Internet Explorer 9 (cũng như các phiên bản cũ hơn).
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Thanh tiến trình dạng chồng lên nhau
Hãy đặt các thanh tiến trình khác nhau vào trong một .progress
để xếp chúng chồng lên nhau.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Giải phóng thời gian, khai phóng năng lực