Hướng dẫn progress-bar bootstrap

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Progress Bar

Progress Bar (Thanh tiến trình) là một thành phần giao diện trực quan để mô tả tiến độ của một công việc, chẳng hạn như tiến trình download, tiến trình cài đặt. 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 sẽ hoàn thành.

Bootstrap cung cấp một vài lớp để bạn xây dựng một Progress Bar.

• .progress-bar: Lớp này sử dụng cho phần tử (element) 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 (wrap) phần tử .progress-bar, nó biểu thị giá trị tối đa của thanh tiến trình.

   

      80%
   

Giải thích về code:

Thuộc tính (Attribute)	Mô tả
aria-valuemin aria-valuemax aria-valuenow	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%"	Đây 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.

Xem ví dụ đầy đủ:

progressbar-example.html

   
      
      
      
   
   
      

         
Progress Bar:

         

            

               80%
            
         

      

      
      
      
   

Colors:

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.

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

colored-progressbar-example.html

   
      
      
      
      
   
   
      

         
Colored Progress Bars:

         

            

               40% Complete (.bg-success)
            
         

         

            

               50% Complete (.bg-info)
            
         

         

            

               60% Complete (.bg-warning)
            
         

      

      
      
      

   

Height:

Bạn chỉ cần thiết lập chiều cao cho .progress, tất cả các .progress-bar bên trong cũng sẽ tự động được thay đổi chiều cao.

Set Height for Progress

2- Striped Progress Bar

Sử dụng lớp .striped-progress-bar cùng với .progress-bar bạn sẽ có được một thanh tiến trình (progress bar) với các kẻ sọc (Stripe)

Striped Progress Bar

   

      80%
   

Kết hợp 2 lớp .progress-bar-striped & .progress-bar-animated, bạn có thể tạo được một thanh tiến trình với hiệu ứng hoạt hình.

Animated Progress Bar

   

      80%
   

3- Stacked 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.

Stacked Progress Bar

   

      Music 3GB
   

   

      Video 6GB
   

   

      Picture 4GB