Progress Bar (Thanh tiến trình) là một thanh đ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. Trong bài viết này chúng ta sẽ học cách sử dụng thanh tiến trình trong Bootstrap 4 nhé các bạn !
Tạo thanh tiến trình mặc định
Để tạo thanh tiến trình trong Bootstrap 4 mặc định, chúng ta chỉ cần thêm lớp .progress vào phần tử vùng chứa và thêm lớp .progress-bar vào phần tử con của nó. Sử dụng thuộc tính chiều rộng CSS để đặt chiều rộng của thanh tiến trình:
Ví dụ:
<div class="container"> <h2>Thanh tiến trình cơ bản</h2> <div class="progress"> <div class="progress-bar" style="width:55%"></div> </div> </div>
Chiều cao thanh tiến trình
Trong Bootstrap 4, chiều cao thanh tiến trình mặc định là 16px. Thế nhưng chúng ta có thể sử dụng thuộc tính height trong CSS để điều chỉnh nó, cần 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.
<div class="container"> <h2>Ví dụ chiều cao thanh tiến trình</h2> <h3>Thanh tiến trình mặc định</h2> <div class="progress"> <div class="progress-bar" style="width:55%"></div> </div> <h3>Thanh tiến trình cao 50px</h2> <div class="progress" style="height:50px"> <div class="progress-bar" style="width:55%; height:50px"></div> </div> </div>
Gán nhãn tên cho thanh tiến trình
Chúng ta có thể thêm nhãn cho thanh tiến trình trong bootstrap 4 đơn giản như ví dụ sau.
<div class="container"> <h2>Gán nhãn thanh tiến trình</h2> <div class="progress"> <div class="progress-bar" style="width:55%">55%</div> </div> </div>
Thêm màu cho thanh tiến trình
Từ các ví dụ trên chúng ta có thể thấy được mawcj định thanh tiến trình có màu blue (xanh dương) thế nhưng chúng ta hoàn toàn có thể thêm màu khác cho thanh tiến trình thêm sinh động màu mè bằng cách sử dụng các lớp ngữ cảnh sau: .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-white, .bg-secondary, .bg-light, .bg-dark.
<div class="container"> <h2>Thêm màu cho thanh tiến trình bằng các lớp ngữ cảnh</h2> <h5>Màu xanh dương<h5> <div class="progress"> <div class="progress-bar" style="width:15%">15%</div> </div> <h5>Màu xanh lá<h5> <div class="progress"> <div class="progress-bar bg-success" style="width:25%">25%</div> </div> <h5>Màu xanh ngọc<h5> <div class="progress"> <div class="progress-bar bg-info" style="width:35%">35%</div> </div> <h5>Màu cam<h5> <div class="progress"> <div class="progress-bar bg-warning" style="width:45%">45%</div> </div> <h5>Màu đỏ<h5> <div class="progress"> <div class="progress-bar bg-danger" style="width:55%">55%</div> </div> <h5>Màu trắng<h5> <div class="progress border"> <div class="progress-bar bg-white" style="width:65%">65%</div> </div> <h5>Màu xám<h5> <div class="progress"> <div class="progress-bar bg-secondary" style="width:75%">75%</div> </div> <h5>Màu sáng<h5> <div class="progress border"> <div class="progress-bar bg-light" style="width:85%">85%</div> </div> <h5>Màu đậm<h5> <div class="progress"> <div class="progress-bar bg-dark" style="width:95%">95%</div> </div> </div>
Bên cạnh đó ban cũng hoàn toàn có thể sử dụng thuộc tính .background-color để thêm màu như ý như sau.
<div class="container"> <h6>Thanh tiến trình màu tím<h6> <div class="progress"> <div class="progress-bar" style="background-color:magenta ; width:55%">55%</div> </div> </div>
Tạo vạch kẻ sọc cho thanh tiến trình
Để tạo vạch sọc (xéo) cho thanh tiến trình trong Bootstrap 4 chúng ta sử dụng thêm lớp .progress-bar-striped vào thanh tiến trình.
Ví dụ:
<div class="container"> <h6>Thanh tiến trình màu xanh <h6> <div class="progress"> <div class="progress-bar progress-bar-striped" style="background-color:green; width:55%">55%</div> </div> </div>
Thanh tiến trình động (Animated )
Ban cũng có thể 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ằng cách thêm lớp .progress-bar-animated như ví dụ sau.
<!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.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.5/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h6>Thanh tiến trình màu xanh <h6> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="background-color:green; width:55%">55%</div> </div> </div> </body> </html> </body> </html>
Copy đoạn mã trên dán vào trình editor của bạn và chạy để xem kết quả.
Nhiều thanh tiến trình
Các thanh tiến trình cũng có thể được xếp chồng lên nhau:
<div class="container"> <h2>Thanh tiến trình xếp chồng lên nhau</h2> <div class="progress"> <div class="progress-bar bg-success" style="width:55%"> 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:30%"> Đang kiểm tra </div> </div> </div>
Lời kết:
Có thể thấy việc tạo và sử dụng các thanh tiến trình trong Bootstrap 4 rất đơn giản phải không nào. Các bạn hãy vận dụng 1 cách linh hoạt các lớp ngữ cảnh để trang trí cho thanh tiến trình của mình thêm bắt mắt nhé. Cảm ơn các bạn đã theo dõi bài viết, hẹn gặp các bạn trong bài viết tiếp theo.
