"Bài 13: Sử dụng thanh tiến độ trong Bootstrap 5" (mới nhất 2023)

Trong bài viết này, chúng ta sẽ tìm hiểu về việc sử dụng thanh tiến độ trong Bootstrap 5. Thanh tiến độ là một thành phần quan trọng trong việc hiển thị tiến trình hoặc phần trăm của một công việc. Chúng ta sẽ được hướng dẫn cách tạo và tùy chỉnh thanh tiến độ theo nhu cầu của mình. Bài viết cũng sẽ cung cấp một số ví dụ minh họa và hướng dẫn cách sử dụng các lớp và thuộc tính trong Bootstrap 5 để tạo ra các thanh tiến độ đẹp và linh hoạt.

Các thanh tiến trình trong Bootstrap 5

Bài viết này sẽ hướng dẫn bạn tạo thanh tiến trình sử dụng Bootstrap để hiển thị quá trình đăng tải hoặc làm việc đang được xử lý.

Trình tiến sử dụng hiệu ứng chuyển tiếp và hoạt ảnh CSS3 để tạo ra một số hiệu ứng đặc biệt. Tuy nhiên, các tính năng này không được hỗ trợ trên trình duyệt IE 9 và các phiên bản Firefox cũ, cũng như Opera 12 không hỗ trợ hình ảnh động.

Thanh tiến trình mặc định

Để tạo một tiến trình cơ bản theo cấu hình mặc định, bạn thực hiện những bước sau đây:

Thêm 1 thẻ <div> cùng với class .progress
Tiếp theo, trong thẻ <div> ở trên, thêm 1 <div> trống với lớp .progress-bar đi kèm.
Thêm thuộc tính style với chiều rộng được biểu thị dưới dạng phần trăm, ví dụ sẽ cho 1 thanh tiến trình đang ở mức 50%.

Nó sẽ tương tự như sau:

<div >
  <div  ></div>
</div>

Viết lại:
Mã HTML cho một file đầy đủ để hiển thị thanh tiến trình sẽ như sau:

Thanh Tiến trình

Tiến trình: 30%

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - QuanTriMang</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Thanh tiến trình cơ bản</h2>
  <p>Để 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 class .progress-bar vào phần tử con của nó. Sử dụng thuộc tính width CSS để đặt chiều rộng của thanh tiến trình:</p>
  <div >
    <div  ></div>
  </div>
</div>

</body>
</html>

Thanh tiến màu sắc

The default color of the progress bar is blue. Change its color by using any background classes according to the context.

Cách dưới đây sẽ giúp bạn hình dung dễ hơn:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Quản Trị Mạng - Boostrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Thanh tiến trình màu sắc</h2>
  <p>Dùng bất kỳ class màu sắc để thay đổi màu của thanh tiến trình:</p> 
  <!-- Blue -->
  <div >
    <div  ></div>
  </div><br>

  <!-- Green -->
  <div >
    <div  ></div>
  </div><br>

  <!-- Turquoise -->
  <div >
    <div  ></div>
  </div><br>

  <!-- Orange -->
  <div >
     <div  ></div>
  </div><br>

  <!-- Red -->
  <div >
    <div  ></div>
  </div><br>

  <!-- White -->
  <div >
    <div  ></div>
  </div><br>

  <!-- Grey -->
  <div >
    <div  ></div>
  </div><br>

  <!-- Light Grey -->
  <div >
    <div  ></div>
  </div><br>

  <!-- Dark Grey -->
  <div >
    <div  ></div>
  </div>
</div>

</body>
</html>

Thanh tiến trình nhiều màu sắc

Thanh tiến trình dạng kẻ sọc

Để tạo một thanh tiến trình có dạng kẻ sọc:

Thêm <div> với class .progress và .progress-striped.
Tiếp theo, bên trong <div> ở trên, thêm một <div> trống với class .progress-bar và class progress-bar-*, trong đó * có thể là success, info, warning, danger.
Thêm một thuộc tính kiểu với chiều rộng được biểu thị bằng số phần trăm, ví dụ: style = “60%”, cho biết thanh tiến trình đang ở mức 60%.

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Boostrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Thanh tiến trình dạng kẻ sọc</h2>
  <p>Class .progress-bar-striped thêm kẻ sọc vào thanh tiến trình:</p> 
  <div >
    <div  ></div>
  </div>
  <br>
  <div >
    <div  ></div>
  </div>
  <br>
  <div >
    <div  ></div>
  </div>
  <br>
  <div >
    <div  ></div>
  </div>
  <br>
  <div >
    <div  ></div>
  </div>
</div>

</body>
</html>

Thanh tiến trình dạng kẻ sọc

Tiến trình có hiệu ứng động thanh

Để tạo một thanh tiến trình mang hiệu ứng động:

Thêm <div> với class .progress và .progress-striped. Ngoài ra, thêm class .active vào .progress-striped.
Tiếp theo, trong <div> ở trên, thêm một trường trống <div> kèm class .progress-bar.
Thêm một thuộc tính kiểu với chiều rộng được biểu thị bằng số phần trăm. Ví dụ, style = “60%” – thanh tiến trình đang ở mức 60%.

Ví dụ sẽ tạo hiệu ứng di chuyển từ phải qua trái như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Boostrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Thanh tiến trình động</h2>
  <p>Thêm class .progress-bar-animated để làm thanh tiến trình động:</p> 
  <div >
    <div  ></div>
  </div>
</div>

</body>
</html>

Thanh tiến trình dạng động

Tiến trình xếp chồng thanh

Thậm chí, bạn có thể xếp chồng nhiều thanh tiến trình lại với nhau. Để làm điều này, bạn chỉ cần đặt nhiều thanh tiến trình vào cùng một “.progress” và chúng sẽ được xếp chồng lên nhau như ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Quản Trị Mạng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Xếp chồng thanh tiến trình</h2>
  <p>Tạo thanh tiến trình xếp chồng bằng cách đặt nhiều thanh vào cùng một thẻ div với :</p> 
  <div >
    <div  >
      Không gian miễn phí
    </div>
    <div  >
      Cảnh báo
    </div>
    <div  >
      Nguy hiểm
    </div>
  </div>
</div>

</body>
</html>

Thanh tiến trình dạng xếp chồng

Dưới đây là những thông tin cơ bản mà bạn cần biết về cách tạo thanh tiến trình trong Bootstrap 5. Như bạn có thể thấy, chỉ cần nắm vững các thẻ cơ bản, bạn có thể tạo ra một thanh tiến trình đẹp mắt theo ý muốn trong Bootstrap 5.

Nguồn: Bài 13: Thanh tiến trình trong Bootstrap 5