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ị mức độ tiến triển của người dùng trong một quy trình.
Để tạo thanh tiến trình mặc định, hãy thêm lớp .progress
vào phần tử vùng chứa và thêm lớp .progress-bar
vào phần tử con của nó. Sử dụng thuộc tính CSS width
để đặt độ rộng của thanh tiến trình:
Ví dụ
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Hãy tự mình thử »Chiều cao thanh tiến trình
Chiều cao của thanh tiến trình theo mặc định là 1rem
(thường là 16px
). Sử dụng thuộc tính height
CSS để thay đổi nó:
Ví dụ
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;"></div>
</div>
Hãy tự mình thử »Nhãn thanh tiến trình
Thêm văn bản bên trong thanh tiến trình để hiển thị phần trăm hiển thị:
Ví dụ
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Hãy tự mình thử » Thanh tiến trình màu
Theo 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 theo ngữ cảnh nào để thay đổi màu của nó:
Ví dụ
<!-- 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>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Hãy tự mình thử »Thanh tiến trình sọc
Sử dụng lớp .progress-bar-striped
để thêm sọc vào thanh tiến trình:
Ví dụ
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Hãy tự mình thử »Thanh tiến trình hoạt hình
Thêm lớp .progress-bar-animated
để tạo hiệu ứng cho thanh tiến trình:
Ví dụ
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Hãy tự mình thử »Nhiều thanh tiến trình
Thanh tiến trình cũng có thể được xếp chồng lên nhau:
Ví dụ
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>
Hãy tự mình thử »