Login

Học Bootstrap 4

  Trang Chủ / Tin tức / Học Bootstrap 4

Progress Bar trong Bootstrap 4

Chào các bạn, trong thực tế, các tác vụ upload hoặc cần người dùng chờ để xử lý trong thời gian dài, các bạn sẽ cần có một thanh tiến trình (progress bar). Trong bài học này, chúng ta cùng nghiên cứu các class để làm các thanh tiến trình trong Bootstrap 4. Lưu ý IE9 không support thanh tiến trình và Opera12 sẽ không support 1 số chức năng của thanh tiến trình.

Progress Bar là gì?

Progress Bar hay còn gọi là Thanh tiến trình là 1 thành phần giao diện mô tả tiến độ hoàn thành của 1 công việc, ví dụ như tiến trình donwload, tiến trình cài đặt, tiến trình upload, …

Progress Bar cho phép người dùng biết được phần trăm hoàn thành công việc và ước lượng thời gian công việc đã và sẽ hoàn tất.

Và ở trong Bootstrap 4 cũng hỗ trợ các bạn class mẫu để xây dựng được Progress Bar, đó là:

  • .progress-bar: lớp này sử dụng cho phần tử biểu thị tiến độ công việc hiện tại
  • .progress: lớp này sử dụng cho phần tử bao bọc phần tử sử dụng .progress-bar, nó biểu thị giá trị tối đá của thanh tiến trình.
Bootstrap 4 quy định CSS cho 2 class này như sau:

.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}
 
.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width 0.6s ease;
}

 



Ngoài ta, có 1 class là .sr_only sẽ che nội dung hoàn thành hiển thị bên trong phần đã hoàn thành, ví dụ:



Trong ví dụ trên, chúng ta đã tạo thanh tiến trình có tiến độ thực hiện là 70% hoàn thành, lớp .sr_only nhằm che nội dung 70% hoàn thành hiển thị bên trong phần đã hoàn thành.

Thanh tiến trình có vạch sọc và nhiều màu sắc định dạng

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

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

Bạn có thể áp dụng màu nền cho Progress-bar, dưới đây là danh sách các màu nền được định nghĩa sẵn của Bootstrap 4.

  • bg-primary
  • bg-secondary
  • bg-success
  • bg-danger
  • bg-warning
  • bg-info
  • bg-light
  • bg-dark
  • bg-muted
  • bg-white

Ví dụ:




Kết luận

 

Như vậy, các bạn đã biết cách sử dụng các class progress bar của bootstrap 4 cung cấp. Hi vọng những kiến thức mình vừa trình bày có thể giúp các bạn trong công việc cũng như học tập. Hẹn các bạn ở bài viết sau.

bootstrap bootstrap 4 progress bar bootstrap progress bar bootstrap 4

Danh Mục Lập Trình

Baobinh.net
TIN LIÊN QUAN
DANH MỤC GIAO DIỆN

Bài viết ngẫu nhiên

Danh mục lập trình