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>

Xem ví dụ

 


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>

Xem ví dụ

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>

Xem ví dụ


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>

Xem ví dụ


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>

Xem ví dụ


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>

Xem ví dụ

 


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>

Xem ví dụ


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>

Xem ví dụ


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>

Xem ví dụ


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>