Bootstrap Progress Bar

Trong hướng dẫn này, bạn sẽ học cách tạo thanh tiến trình bằng Bootstrap.

Tạo thanh tiến trình với Bootstrap

Thanh tiến trình (progress bar) có thể được sử dụng để hiển thị tiến trình của một nhiệm vụ hoặc hành động cho người dùng.

Ví dụ sau đây sẽ chỉ cho bạn cách tạo một thanh tiến trình đơn giản.

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

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh tiến trình với Bootstrap
Lưu ý: Trình bao bọc, tức là phần tử .progress cho biết giá trị tối đa của thanh tiến trình, trong khi phần tử .progress-bar bên trong cho biết tiến trình cho đến nay. Ngoài ra, .progress-bar yêu cầu một kiểu nội tuyến hoặc CSS tùy chỉnh để đặt chiều rộng của chúng.

Tạo thanh tiến trình với nhãn

Bạn cũng có thể hiển thị trạng thái tiến trình dưới dạng nhãn phần trăm chỉ bằng cách đặt văn bản bên trong phần tử .progress-bar, như được hiển thị trong ví dụ sau:

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

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh tiến trình với nhãn

Nếu bạn đang hiển thị nhãn tỷ lệ phần trăm, bạn cũng nên áp dụng min-width cho thanh tiến trình để đảm bảo rằng nhãn vẫn có thể đọc được ngay cả đối với tỷ lệ phần trăm thấp, như được hiển thị ở đâ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>

Đặt chiều cao của thanh tiến trình

Chiều cao mặc định của thanh tiến trình là 16px, nhưng bạn cũng có thể đặt chiều cao của nó theo nhu cầu của mình bằng cách đặt thuộc tính CSS height trên phần tử .progress, như sau:

<!-- Progress bar with 2px height -->
<div class="progress" style="height: 2px;">
    <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>

Kết quả của ví dụ trên sẽ giống như sau:

Đặt chiều cao của thanh tiến trình

Tạo thanh tiến trình dạng sọc

Để tạo thanh tiến trình dạng sọc, chỉ cần thêm một lớp bổ sung .progress-bar-striped vào phần tử .progress-bar, như được hiển thị trong ví dụ sau:

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

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh tiến trình dạng sọc
Mẹo: Sọc được tạo thông qua CSS gradient trên màu nền của thanh tiến trình. Tìm hiểu thêm về CSS3 Gradient để biết cách tạo màu chuyển sắc bằng CSS.

Tạo hiệu ứng cho thanh tiến trình

Bạn cũng có thể tạo hiệu ứng cho thanh tiến trình dạng sọc. Thêm lớp .progress-bar-animated vào phần tử .progress-bar, nó sẽ tạo hiệu ứng chuyển động cho các sọc từ phải sang trái thông qua CSS3 animation.

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

Kết quả của ví dụ trên sẽ giống như sau:

Thay đổi giá trị thanh tiến trình động

Thanh tiến trình tĩnh không ấn tượng lắm. Ví dụ sau đây sẽ cung cấp cho bạn một ý tưởng sơ bộ về cách cập nhật trạng thái của thanh tiến trình Bootstrap động bằng cách sử dụng jQuery.

<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>

Tạo thanh tiến trình xếp chồng

Bạn cũng có thể đặt nhiều thanh tiến trình trong một thành phần tiến trình để xếp chồng chúng.

Đây là một ví dụ minh họa cách nó thực sự hoạt động.

<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>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh tiến trình xếp chồng

Tạo thanh tiến trình có màu sắc khác nhau

Ngoài ra, bạn có thể sử dụng các lớp tiện ích màu nền để tạo các thanh tiến trình có nhiều màu sắc khác nhau nhằm truyền đạt ý nghĩa thông qua màu sắc, như thể hiện trong ví dụ sau:

<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>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh tiến trình có màu sắc khác nhau

Tạo thanh tiến trình sọc có màu sắc khác nhau

Tương tự như các màu đồng nhất, bạn cũng có thể tạo các thanh tiến trình dạng sọc có màu khác nhau bằng cách sử dụng các lớp tiện ích màu nền giống nhau. Hãy xem ví dụ sau:

<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>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo thanh tiến trình sọc có màu sắc khác nhau
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.