Bootstrap: Thanh tiến trình (Progress bars)

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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

60% Complete
<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 đủ.

60%
<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 đủ.

0%
2%
<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.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<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.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<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).

45% Complete
<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.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<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>
» Tiếp: Media
« Trước: Thông báo (Alerts)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!