Bài 17: Sử dụng Progress trong Bootstrap để tạo tiến trình

Bài 17: Sử dụng Progress trong Bootstrap để tạo tiến trình

Progress trong Bootstrap để tạo ra các tiến trình dựa trên số phần trăm đầu vào khai báo.

Bạn có thể bắt gặp ở đâu đó các thanh hiển thị chỉ số mức độ đạt được như bạn đã trả lời được bao nhiêu câu hỏi, hoặc bao nhiêu nhiệm vụ.

Cách sử dụng Progress trong Bootstrap

Tiến trình đơn giản bằng Progress trong Bootstrap

Các thuộc tính được sử dụng trong Progress trong Bootstrap:

  • progress: Bao bọc tối đa tiến trình.
  • aria-valuenow: Giá trị tiến trình hiện tại.
  • aria-valuemin: Giá trị thấp nhất.
  • aria-valuemax: Giá trị cao nhất.

Ví dụ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar" style="width: 0%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar" style="width: 25%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar" style="width: 50%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar" style="width: 75%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar" style="width: 100%"></div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

tien-trinh-don-gian-su-dung-progress-bootstrap

Tùy chỉnh kích thước thanh tiến trình

Bạn có thể điều chỉnh kích thước chiều rộng, khi quy định height.

Bây giờ ta sẽ thử cho kích thước chiều cao bằng 5px và 20px:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="progress" role="progressbar" aria-label="Example 5px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 5px">
	<div class="progress-bar" style="width: 25%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
	<div class="progress-bar" style="width: 25%"></div>
	</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

dieu-chinh-kich-thuoc-progress

Tạo nhãn cho Progress

Để tạo nhãn cho Progress trong Bootstrap bạn chỉ cần thêm nội dung vào progress-bar:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
	<div class="progress-bar" style="width: 25%">25%</div>
	</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

tao-nhan-cho-progress

Lưu ý: Khi bạn tạo nhãn nhưng vượt quá kích thước của progress-bar thì nội dung nhãn không hiển thị hết. Để khắc phục thì bạn có thể thêm thuộc tính: overflow-visible

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
	<div class="progress-bar overflow-visible text-dark" style="width: 25%">Tiến trình hoàn thành câu hỏi trắc nghiệm</div>
	</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

tao-nhan-cho-progress-vuot-qua-khung

Thay đổi màu sắc

Bạn cũng có thể thay đổi màu sắc cho thanh tiến trình bằng thuộc tính:

  • bg-success
  • bg-info
  • bg-warning
  • bg-danger
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar bg-success" style="width: 25%">25%</div>
	</div>
	<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
	</div>
	<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
	</div>
	<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
	<div class="progress-bar bg-danger" style="width: 100%">100%</div>
	</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

thay-doi-mau-sac-cho-progress

Các tiến trình chồng xếp vào nhau

Để thiết lập cho các tiến trình chồng xếp lên nhau, nghĩa là nhiều tiến trình kết hợp trong 1 thanh ta có thể sử dụng class=”progress-stacked” để bao bọc nó:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="progress-stacked">
	<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
	<div class="progress-bar"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
	<div class="progress-bar bg-success"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
	<div class="progress-bar bg-info"></div>
	</div>
	</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

cac-tien-trinh-chong-xep-vao-nhau

Tạo chuyển động sọc cho Progress

Tiến trình kết hợp với chuyển động như ban thấy ở các phần load trang web hoặc load thông tin, bạn có thể sử dụng class: progress-bar-stripedprogress-bar-animated

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
	  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
	</div>
	<!-- End Example Code -->
  </body>
</html>

Kết quả:

tao-chuyen-dong-soc-cho-progress

Lời kết

Trên đây mình và các bạn đã cùng nhau tìm hiểu vể Progress trong Bootstrap, hi vọng các bạn có thể sử dụng nó để ứng dụng vào trang web của mình.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi bài viết.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *