Bài 10: Progress Bar trong Bootstrap 4

0
545

Xin chào các bạn, trong bài viết này, các bạn sẽ học các lớp để trang trí cho các thanh tiến trình (progress bar) 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.
Progress Bar trong Bootstrap 4

Bootstrap 4 quy định CSS cho 2 class này như sau:

Ví dụ:

Ở ví dụ trên:

  • aria-valuemin
    aria-valuemax
    aria-valuenow
    là các thuộc tính thể hiện giá trị nhỏ nhất, giá trị lớn nhất và giá trị hiện tại của tiến trình (progress). Các thuộc tính này không có tác dụng để hiển thị độ dài của progress-bar mà bạn nhìn thấy trên giao diện. Nhưng các thuộc tính này cho phép bạn lấy được các giá trị thông qua Javascript.
  • style=”width:80%” là cách để hiển thị độ dài (phần trăm) của progress-bar mà bạn nhìn thấy trên giao diện.

Kết quả như sau:

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

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ụ:

Xếp chồng Progress Bar

Các thanh tiến trình (progress-bar) cũng có thể được xếp chồng (stack) nên nhau. Nó giống như hình minh họa dưới đây.

Ví dụ:

Kết luận

Như vậy, bài viết đã giúp các bạn nắm được các lớp định nghĩa cho thanh tiến trình để thể hiện tiến độ của 1 công việc hay tác vụ nào đó trên giao diện web.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây