Progress Bar trong Bootstrap 4

Progress Bar trong Bootstrap 4

Anh NguyễnBạn nghĩ gì về bài viết này?

Progress Bar trong Bootstrap

Progress Bar trong Bootstrap (hay còn gọi là thanh tiến trình) là một thanh được sử dụng để hiển thị cho người dùng xem họ đã đi được bao xa trong một quá trình.

Bootstrap cung cấp một số loại thanh tiến trình.

Tạo Progress Bar trong Bootstrap

Để 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%.

Basic Progress Bar

70% Complete 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Lưu ý:

  • Thanh tiến trình không được hỗ trợ trong Internet Explorer 9 trở về trước.
  • Để giúp cải thiện khả năng tiếp cận cho những người sử dụng trình đọc màn hình, bạn nên bao gồm các thuộc tính aria- *.

Chiều cao của Progress Bar trong Bootstrap

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>Bootstrap Example</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</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>Code language: HTML, XML (xml)

Gán nhãn tên cho Progress Bar trong Bootstrap

Bạn có thể thêm nhãn cho thanh tiến trình đơn giản như ví dụ sau. Xóa lớp .sr-only khỏi thanh tiến trình để hiển thị phần trăm hiển thị:

Progress Bar With Label

70% 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Progress Bar With Label</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70%
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Chèn màu cho Progress Bar trong Bootstrap

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.

Colored Progress Bars

The contextual classes colors the progress bars:

40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger) 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Colored Progress Bars</h2>
  <p>The contextual classes colors the progress bars:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40% Complete (success)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
      50% Complete (info)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      60% Complete (warning)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Tạo vạch sọc cho Progress Bar trong Bootstrap

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

Striped Progress Bars

The .progress-bar-striped class adds stripes to the progress bars:

40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger) 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Striped Progress Bars</h2>
  <p>The .progress-bar-striped class adds stripes to the progress bars:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40% Complete (success)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
      50% Complete (info)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
      60% Complete (warning)
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete (danger)
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Progress Bar động trong Bootstrap

Để 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.

Animated Progress Bar

The .active class animates the progress bar:

40% 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Tạo nhiều Progress Bar 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.

Stacked Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class .progress:

Free Space
Warning
Danger 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Stacked Progress Bars</h2>
  <p>Create a stacked progress bar by placing multiple bars into the same div with class .progress:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
      Warning
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
      Danger
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

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.

Tựa đề thanh tiến trình
65%
35%
<!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</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>
</body>
</html>Code language: HTML, XML (xml)

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.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận