Bootstrap 5 thanh tiến trình

Thanh tiến trình cơ bản

Thanh tiến trình có thể được sử dụng để hiển thị tiến độ của người dùng trong một quá trình.

Để tạo thanh tiến trình mặc định, hãy thêm .progress thêm lớp vào phần tử chứa và đặt .progress-bar thêm lớp vào phần tử con của nó. Hãy sử dụng thuộc tính width của CSS để thiết lập chiều rộng của thanh tiến trình:

Mô hình

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Thử ngay

Chiều cao thanh tiến trình

Chiều cao thanh tiến trình mặc định là 1rem（thường là 16px）。Hãy sử dụng CSS height thuộc tính để thay đổi nó.

Lưu ý:Lưu ý, bạn phải đặt cùng chiều cao cho khay tiến trình và thanh tiến trình:

Mô hình

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

Thử ngay

Thẻ thanh tiến trình

Thêm văn bản vào thanh tiến trình để hiển thị phần trăm có thể nhìn thấy:

Mô hình

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Thử ngay

Thanh tiến trình màu

Mặc định, thanh tiến trình có màu xanh lam (chính). Sử dụng bất kỳ lớp nền cảnh nào để thay đổi màu sắc của nó:

Mô hình

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Xám -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Xám nhạt -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Đen xám -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Thử ngay

Thanh tiến độ có vân

Vui lòng sử dụng .progress-bar-striped Lớp để thêm vân vào thanh tiến độ:

Mô hình

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Thử ngay

Thanh tiến độ động

Vui lòng thêm .progress-bar-animated Lớp để tạo thanh tiến độ động:

Mô hình

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

Thử ngay

Nhiều thanh tiến độ

Thanh tiến độ có thể chồng lên nhau:

Mô hình

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Dung lượng trống
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Cảnh báo
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Rủi ro
  </div>
</div>

Thử ngay