[Bootstrap 4] Phần 13: Thanh tiến trình

Thanh tiến trình (tiếng Anh là progress bar) là một điều khiển thể hiện tiến độ thực hiện của một thao tác nào đó như tải về, thực thi tính toán, hay truyền tải tập tin.

Tạo thanh tiến trình

Để tạo thanh tiến trình trong Bootstrap, đơn giản bạn chỉ cần thêm lớp .progress làm phần tử chứa và lớp .progress-bar để thêm các phần tử con. Sau đây là ví dụ tạo một thanh tiến trình đơn giản với tiến độ thực hiện được là 70%.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Thanh tiến trình đơn giản --- dammio.com</h2>
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
</div>

</body>
</html>

Chiều cao thanh tiến trình

Trong Bootstrap 4, mặc định chiều cao là 16px. Bạn có thể sử dụng thuộc tính height trong CSS để điều chỉnh, lưu ý đặt cùng 1 giá trị height cho phần tử chứa và phần tử con thanh tiến trình.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Chiều cao thanh tiến trình --- dammio.com</h2>
  <p>Chiều cao mặc định của thanh tiến trình là 1rem (16px). Bạn có thể thay đổi thuộc tính height để thay đổi chiều cao:</p> 
  <div class="progress" style="height:20px">
    <h6>Chiều cao thanh tiến trình 20px</h6>
    <div class="progress-bar" style="width:40%;height:20px"></div>
  </div>
  <br>
  <div class="progress" style="height:30px">
    <h6>Chiều cao thanh tiến trình 30px</h6>
    <div class="progress-bar" style="width:50%;height:30px"></div>
  </div>
  <br>
  <div class="progress" style="height:45px">
    <h6>Chiều cao thanh tiến trình 45px</h6>
    <div class="progress-bar" style="width:60%;height:45px"></div>
  </div>
</div>
 
</body>
</html>

Gán nhãn tên cho thanh tiến trình

Bạn có thể thêm nhãn cho thanh tiến trình đơn giản như ví dụ sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Gán nhãn cho thanh tiến trình --- dammio.com</h2>
  <div class="progress">
    <div class="progress-bar" style="width:65%">65%</div>
  </div>
</div>

</body>
</html>

Chèn màu cho thanh tiến trình

Theo mặc định thì thanh tiến trình có màu xanh dương (blue), tuy nhiên bạn có thể thêm màu khác cho thanh tiến trình bằng cách dùng các lớp như .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-white, .bg-secondary, .bg-light, và .bg-dark.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Thêm màu cho thanh tiến trình --- dammio.com</h2>
  <p>Sử dụng bất kỳ lớp màu bối cảnh để thay đổi màu cho thanh tiến trình:</p> 
  <h6>Màu xanh dương<h6>
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div><br>

  <h6>Màu xanh lá<h6>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:20%"></div>
  </div><br>

  <h6>Màu xanh ngọc<h6>
  <div class="progress">
    <div class="progress-bar bg-info" style="width:30%"></div>
  </div><br>

  <h6>Màu cam<h6>
  <div class="progress">
     <div class="progress-bar bg-warning" style="width:40%"></div>
  </div><br>

  <h6>Màu đỏ<h6>
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"></div>
  </div><br>

  <h6>Màu trắng<h6>
  <div class="progress border">
    <div class="progress-bar bg-white" style="width:60%"></div>
  </div><br>

  <h6>Màu xám<h6>
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
  </div><br>

  <h6>Màu sáng<h6>
  <div class="progress border">
    <div class="progress-bar bg-light" style="width:80%"></div>
  </div><br>

  <h6>Màu đậm<h6>
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>
  </div>
</div>

</body>
</html>

Ngoài ra, bạn còn thể sử dụng thuộc tính .background-color để thêm màu như ý như sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Thêm màu cho thanh tiến trình</h2>
  <p>Sử dụng thuộc tính background-color:</p> 
  <h6>Màu hồng --- dammio.com<h6>
  <div class="progress">
    <div class="progress-bar" style="background-color:pink;width:50%">50%</div>
  </div><br>
</div>

</body>
</html>

Tạo vạch sọc cho thanh tiến trình

Để tạo vạch sọc (xéo) bạn có thể thêm lớp .progress-bar-striped vào thanh tiến trình.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vạch sọc trong các thanh tiến trình --- dammio.com</h2>
  <p>Thêm lớp .progress-bar-striped để tạo vạch sọc cho các thanh tiến trình:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:20%">20%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:30%">30%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:45%">45%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:65%">65%</div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:80%">80%</div>
  </div>
</div>

</body>
</html>

Thanh tiến trình động

Để làm cho thanh tiến trình bắt mắt hơn, kèm theo chuyển động làm người dùng có cảm giác thanh tiến trình đang hoạt động, bạn có thể thêm lớp .progress-bar-animated như ví dụ sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Thanh tiến trình động --- dammio.com</h2>
  <p>Thêm lớp .progress-bar-animated để tạo hiệu ứng động cho thanh tiến trình:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:75%"></div>
  </div>
</div>

</body>
</html>

Tạo nhiều thanh tiến trình cùng lúc

Cuối cùng, bạn có thể tạo nhiều thanh tiến trình khác nhau trong phần tử chứa thể hiện các trạng thái khác nhau như sau.

Liên quan: [Bootstrap 4] Phần 7: Hình ảnh

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Tạo nhiều thanh tiến trình cùng lúc --- dammio.com</h2>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:35%">
      Thành công
    </div>
    <div class="progress-bar bg-danger" style="width:15%">
      Chưa thành công
    </div>
    <div class="progress-bar bg-warning" style="width:50%">
      Đang kiểm tra
    </div>
  </div>
</div>

</body>
</html>

Hiển thị phần trăm đang thực hiện và chưa thực hiện

Để thực hiện điều này, bạn có thể áp dụng nguyên tắc tạo nhiều thanh tiến trình sao cho tổng độ rộng là 100%, tô màu cho phần chưa thực hiện là màu xám. Hãy xem ví dụ đơn giản sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="progress-wrapper">
              <div>
                <div>
                  <span>Tựa đề thanh tiến trình --- dammio.com</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar" style="width: 65%;">65%</div>
				<div class="progress-bar bg-light" style="width:35%"><span style="color:black">35%</span></div>
				
              </div>
    </div>
</div>

Thanh tiến trình kèm theo hiệu ứng động

Để sử dụng hiệu ứng động cho thanh tiến trình, thông thường chúng ta phải áp dụng jQuery hoặc các thư viện Javascript khác tương tự jQuery. Lưu ý đoạn Javascript thường đặt cuối trang trước thẻ body đóng. Ví dụ sau khi nhấn nút Bắt đầu thì thanh tiến trình sẽ tự động chạy cho đến khi hoàn thành.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
	.spinner-border {
		border-width: .2em;
	}
  </style>
  
</head>
<body>
 
<div class="container">
	<div class="container py-4">
	<h2>Thanh tiến trình kèm hiệu ứng động --- dammio.com</h2>
    <div class="progress">
		
        <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progress" style="width:0%">

        </div>
    </div>
    <button type="button" id="btn" class="btn btn-primary mt-2" autocomplete="off">Bắt đầu</button>
</div>

<script>
  $('#btn').click(function() {

  var timerId, percent;

  // reset progress bar
  percent = 0;
  $('#btn').attr('disabled', true);
  $('#progress').css('width', '0px').addClass('progress-bar-animated active');
  $('#progress').html('<span class="spinner-border spinner-border-sm ml-auto"></span>');

  timerId = setInterval(function() {

    // increment progress bar
    percent += 5;
    $('#progress').css('width', percent + '%');

    if (percent >= 100) {
      clearInterval(timerId);
      $('#btn').attr('disabled', false);
      $('#progress').removeClass('progress-bar-animated active').html('Hoàn thành');
    }
  }, 300);
	});
  </script>
</div>

Kết luận

Bài viết đã hướng dẫn cho bạn cách tạo thanh tiến trình trong Bootstrap 4 thông qua nhiều ví dụ. Mời bạn tiếp tục theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2019). [Bootstrap 4] Phần 13: Thanh tiến trình. https://www.dammio.com/2019/12/04/bootstrap-4-phan-13-thanh-tien-trinh.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 13: Thanh tiến trình}, year = {2019}, url = {https://www.dammio.com/2019/12/04/bootstrap-4-phan-13-thanh-tien-trinh}, urldate = {2024-12-05} }

Theo dõi

2 Góp ý

Cũ nhất

Mới nhất Được bỏ phiếu nhiều nhất

Phản hồi nội tuyến

Xem tất cả bình luận

[Bootstrap 4] Phần 12: Sử dụng huy hiệu (nhãn hiệu) trong Bootstrap 4 | | DAMMIO

5 năm trước

[…] [Bootstrap 4] Phần 13: Thanh tiến trình – 04 tháng 12, 2019 lúc 11:50:31 Chiều […]

Trả lời

[Bootstrap 4] Phần 14: Spinner (Con quay) trong Bootstrap 4 | | DAMMIO

4 năm trước

wpDiscuz

Kết nối