Trong Bootstrap 4 được bổ sung thành phần mới có tên là Spinner, được sử dụng để hiển thị trạng thái đang tải. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết về Spinner trong Bootstrap.
1. Tạo Spinner trong Bootstrap
Spinner là các biểu tượng hiển thị trạng thái đang tải, chẳng hạn như trạng thái đang tải ứng dụng, trang web, ... và được phát triển dựa trên HTML và CSS. Tuy nhiên để hiển thị hoặc ẩn spinner trên trang web, chúng ta sẽ phải sử dụng JavaScript tùy chỉnh.
Ngoài ra chúng ta cũng có thể dễ dàng tùy chỉnh giao diện, kích thước và căn chỉnh các spinner bằng cách sử dụng các lớp tiện ích được xác định trước.
Để tạo một spinner, chúng ta sử dụng lớp .spinner-border như trong ví dụ dưới đây:
Kết quả đầu ra có dạng như dưới đây:
Sử dụng lớp .sr-only để ẩn một phần tử trên tất cả các thiết bị, ngoại trừ trình đọc màn hình.
2. Tạo Spinner với các màu sắc khác nhau
Bằng cách sử dụng các lớp tiện ích màu sắc để tùy chỉnh màu sắc cho spinner như trong ví dụ dưới đây:
Kết quả đầu ra có dạng như dưới đây:
3. Tạo Spinner động
Ngoài ra chúng ta cũng có thể tạo các spinner động, dạng kiểu hiển thị biểu tượng sau đó mờ dần.
Ví dụ: Ví dụ dưới đây minh họa cách tạo spinner động trong Bootstrap:
Kết quả đầu ra có dạng như dưới đây:
Tương tự, chúng ta cũng có thể tùy chỉnh màu sắc của các spinner động bằng cách sử dụng các lớp tiện ích màu sắc như trong ví dụ dưới đây:
Kết quả đầu ra có dạng như dưới đây:
4. Kích thước Spinner
Bằng cách sử dụng lớp .spinner-border-sm và lớp .spinner-grow-sm để tạo spinner có kích thước nhỏ hơn, được sử dụng trong các thành phần khác như các nút.
Ví dụ: Trong ví dụ dưới đây minh họa cách thay đổi kích thước spinner trong Bootstrap:
Kết quả đầu ra có dạng như dưới đây:
Hoặc ngoài ra chúng ta cũng có thể sử dụng CSS tùy chỉnh để thay đổi kích thước spinner.
Kết quả đầu ra có dạng như dưới đây:
5. Thêm Spinner vào các nút trong Bootstrap
Bằng cách thêm spinner trong các nút để người dùng dễ dàng hình dung hành động hoặc tác vụ hiện tại đang được xử lý.
Ví dụ: trong ví dụ dưới đây minh họa thêm các spinner trong các nút bị vô hiệu hóa:
Kết quả đầu ra có dạng như dưới đây:
6. Căn chỉnh Spinner trong Bootstrap
Để căn chỉnh các spinner trong Bootstrap sang trái, phải hoặc chính giữa, chúng ta sử dụng các lớp căn chỉnh văn bản, lớp flexbox hoặc lớp float.
Ví dụ: Ví dụ dưới đây minh họa cách căn chỉnh spinner trong Bootstrap:
Kết quả đầu ra có dạng như dưới đây:
Bài học Bootstrap trên đây, Taimienphi.vn vừa giới thiệu cho bạn về Spinner trong Bootstrap, trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Jumbotron trong Bootstrap.
Ngoài ra bạn đọc có thể tham khảo thêm một số bài viết khác đã có trên Taimienphi.vn để tìm hiểu thêm về Pagination trong Bootstrap.