Bootstrap 4 - Bootstrap Progress Bars
Progress Bar trong Bootstrap, khái niệm và cách sử dụng
Progress Bar (thanh tiến trình) được sử dụng để hiển thị tiến trình của một tác vụ hoặc hành động nào đó cho người dùng.
Ví dụ: Trong ví dụ dưới đây minh họa cách tạo một thanh tiến trình đơn giản trong Bootstrap:
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>
Tạo Thanh Tiến Trình Với Các Nhãn
Để hiển thị trạng thái thanh tiến trình dưới dạng phần trăm, chúng ta chỉ cần sử dụng lớp .sr-only để xóa span trong thanh tiến trình, như trong ví dụ dưới đây:
<div class="progress">
<div class="progress-bar" style="width: 25%">
25%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%">
50%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%">
75%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%">
100%
</div>
</div>
Lưu ý: nếu hiển thị nhãn phần trăm, chúng ta nên áp dụng min-width cho thanh tiến trình để đảm bảo phần nhãn vẫn hiển thị ngay cả khi tỷ lệ phần trăm thấp, chẳng hạn như trong ví dụ dưới đây:
<div class="progress">
<div class="progress-bar" style="min-width: 20px;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="min-width: 20px; width: 2%;">
2%
</div>
</div>
Thiết Lập Chiều Cao Cho Thanh Tiến Trình
Mặc định chiều cao của thanh tiến trình (progress bar) là 16px, tuy nhiên nếu muốn chúng ta có thể thiết lập chiều cao bất kỳ bằng cách thiết lập thuộc tính CSS height trên phần tử .progress.
Ví dụ: ví dụ dưới đây minh họa cách thiết lập chiều cao cho progress bar:
<!-- Progress bar with 1px height -->
<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<!-- Progress bar with 20px height -->
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
Tạo Thanh Tiến Trình Có Vạch Sọc
Để tạo thanh tiến trình có vạch sọc, chúng ta chỉ cần thêm lớp .progress-bar-striped cho phần tử .progress-bar.
Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo một thanh tiến trình có vạch sọc:
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
</div>
Tạo Thanh Tiến Trình Động
Để tạo thanh tiến trình động, chúng ta thêm lớp .progress-bar-animated cho phần tử .progress-bar, chẳng hạn như trong ví dụ dưới đây:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
</div>
Cập Nhật Giá Trị Hiển Thị Trong Thanh Tiến Trình
Trong ví dụ dưới đây minh họa cách cập nhật giá trị hiển thị trong thanh tiến trình trong Bootstrap bằng cách sử dụng jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Changing the Value of Bootstrap 4 Progress Bar Dynamically</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Progress bar HTML -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="min-width: 20px;"></div>
</div>
<!-- jQuery Script -->
<script>
var i = 0;
function makeProgress(){
if(i < 100){
i = i + 1;
$(".progress-bar").css("width", i + "%").text(i + " %");
}
// Wait for sometime before running this script again
setTimeout("makeProgress()", 100);
}
makeProgress();
</script>
</div>
</body>
</html>
Tạo Thanh Tiến Trình Xếp Chồng
Ngoài ra chúng ta cũng có thể xếp chồng nhiều thanh khác nhau trong cùng một thanh tiến trình, giống như trong ví dụ dưới đây:
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%">
Program Files (40%)
</div>
<div class="progress-bar bg-warning" style="width: 25%">
Residual Files (25%)
</div>
<div class="progress-bar bg-danger" style="width: 15%">
Junk Files (15%)
</div>
</div>
Tạo Thanh Tiến Trình Với Các Lớp Nhấn Mạnh
Bootstrap cũng bao gồm một số lớp tiện ích nhấn mạnh được sử dụng cho các thanh tiến trình để truyền đạt ý nghĩa thông qua các màu sắc khác nhau, tham khảo ví dụ dưới đây:
<div class="progress">
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 90%"></div>
</div>
Tạo Thanh Tiến Trình Có Vạch Sọc Với Các Lớp Nhấn Mạnh
Tương tự, chúng ta cũng có thể tạo các thanh tiến trình với các lớp nhấn mạnh có vạch sọc khác nhau, như trong ví dụ dưới đây:
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 90%"></div>
</div>