Spinner trong Bootstrap

Trong bài học trước Taimienphi.vn đã hướng dẫn bạn cách tạo Progress Bar (thanh tiến trình) trong Bootstrap, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Spinner trong Bootstrap.

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.

spinner trong bootstrap

Tìm hiểu 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:

spinner trong bootstrap 2

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 3

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:

spinner trong bootstrap 4

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 5

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:

spinner trong bootstrap 6

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 7

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:

spinner trong bootstrap 8

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 9

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:

spinner trong bootstrap 10

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 11

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.

spinner trong bootstrap 12

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 13

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:

spinner trong bootstrap 14

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 15

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:

spinner trong bootstrap 16

Kết quả đầu ra có dạng như dưới đây:

spinner trong bootstrap 17

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.

https://thuthuat.taimienphi.vn/spinner-trong-bootstrap-51213n.aspx
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.

Tác giả: Phạm Nhất Vương     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Tạo Fixed Layout (bố cục cố định) với Bootstrap
Tạo Fluid Layout với Bootstrap
Tạo và chỉnh sửa Button (nút) trong Bootstrap
Tạo form (biểu mẫu) tùy chỉnh trong Bootstrap
Jumbotron trong Bootstrap, hiển thị nội dung trên web
Từ khoá liên quan:

Spinner trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Bootstrap File Input

    Đổi miền nhập file thành giao diện chọn file

    Bootstrap File Input là tiện ích jQuery chuyển đổi miền nhập file cổ điển thành giao diện chọn file chuyên nghiệp. Thay vì chọn và tải lần lượt từng file hay sử dụng nhiều miền tải file giống nhau, các nhà phát triển đã ...

Tin Mới