Spinner (tạm dịch là con quay) là một thành phần mới ở Bootstrap 4 so với Bootstrap 3, dùng để mô tả hình ảnh hiệu ứng trạng thái đang tải hoặc trạng thái chờ đợi của một thao tác nào đó.
Tạo Spinner
Để tạo Spinner, bạn chỉ cần sử dụng lớp .spinner-border, lớp này sẽ tạo Spinner mặc định là màu đen.
<!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap --- dammio.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tạo Spinner (con quay) --- dammio.com</h2> <p>Sử dụng lớp <code>.spinner-border</code> để tạo Spinner:</p> <div class="spinner-border"></div> </div> </body> </html>
Tô màu cho Spinner
Sau khi tạo Spinner, bạn muốn có thêm màu sắc thì tương tự các thành phần Bootstrap khác, bạn có thể thêm các lớp màu sắc bối cảnh như .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-dark, và .text-light như ví dụ sau.
<!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap --- dammio.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tô màu cho Spinner --- dammio.com</h2> <p>Sử dụng bất kỳ lớp bối cảnh màu sắc nào để tô màu như sau:</p> <div class="spinner-border text-muted"></div> <div class="spinner-border text-primary"></div> <div class="spinner-border text-success"></div> <div class="spinner-border text-info"></div> <div class="spinner-border text-warning"></div> <div class="spinner-border text-danger"></div> <div class="spinner-border text-secondary"></div> <div class="spinner-border text-dark"></div> <div class="spinner-border text-light"></div> </div> </body> </html>
Spinner Growing (kiểu Spinner chấm tín hiệu hình tròn)
Bạn có thể dùng kiểu tín hiệu tròn để tạo sự đa dạng cho giao diện Web bằng cách sử dụng lớp .spinner-grow và cũng tương tự dùng các lớp bối cảnh màu sắc để tạo màu cho các chấm tín hiệu tròn này.
<!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap --- dammio.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Spinner Growing</h2> <p>Sử dụng lớp <code>.spinner-grow</code> để tạo chấm tín hiệu tròn và các lớp màu sắc bối cảnh để tô màu:</p> <div class="spinner-grow text-muted"></div> <div class="spinner-grow text-primary"></div> <div class="spinner-grow text-success"></div> <div class="spinner-grow text-info"></div> <div class="spinner-grow text-warning"></div> <div class="spinner-grow text-danger"></div> <div class="spinner-grow text-secondary"></div> <div class="spinner-grow text-dark"></div> <div class="spinner-grow text-light"></div> </div> </body> </html>
Kích thước Spinner
Để tạo các kích thước nhỏ cho Spinner, bạn có thể dùng các lớp như .spinner-border-sm hoặc .spinner-grow-sm như ví dụ sau. Lớp .spinner-border là mô tả Spinner có kích thước mặc định.
<!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap --- dammio.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Kích thước Spinner</h2> <p>Sử dụng <code>.spinner-border-sm</code> hoặc <code>.spinner-grow-sm</code> để tạo Spinner có kích thước nhỏ:</p> <div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div> </div> </body> </html>
Spinner trong nút nhấn
Spinner còn có thể kết hợp với nút nhấn, textbox để tạo ra nhiều hiệu ứng giúp người dùng tương tác với giao diện Web tốt hơn. Sau đây là cách thêm 1 spinner vào nút nhấn.
<!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap --- dammio.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Spinner nút nhấn</h2> <p>Thêm spinner vào các nút nhấn --- dammio.com:</p> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Đang tải... </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Đang tải... </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> Đang tải... </button> </div> </body> </html>
Kết luận
Như vậy phần này chỉ cho bạn cách đơn giản để tạo Spinner trong Bootstrap 4, tuy nhiên chừng này thật sự là chưa đủ và đa dạng để bạn có thể làm dự án thực tế. Mời bạn tiếp tục theo dõi phần Spinner nâng cao tiếp theo.
- APA:
Dammio. (2019). [Bootstrap 4] Phần 14: Spinner (Con quay) trong Bootstrap 4. https://www.dammio.com/2019/12/09/bootstrap-4-phan-14-spinner-con-quay-trong-bootstrap-4.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[Bootstrap 4] Phần 14: Spinner (Con quay) trong Bootstrap 4},
year = {2019},
url = {https://www.dammio.com/2019/12/09/bootstrap-4-phan-14-spinner-con-quay-trong-bootstrap-4},
urldate = {2025-01-31}
}
[…] [Bootstrap 4] Phần 14: Spinner (Con quay) trong Bootstrap 4 – 09 tháng 12, 2019 lúc 9:41:35 Sáng […]