Spinner (tạm dịch sang tiếng mẹ đẻ của chúng ta là con quay) là một thành phần mới ở Bootstrap 4 so với Bootstrap 3. Spinner trong Bootstrap 4 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 đó. Trong bài viết dưới đây chúng ta sẽ tìm hiểu về Spinner (con quay) trong Bootstrap 4 các bạn nhé!
Tạo Spinner
Để tạo Spinner trong Bootstrap 4, chúng ta chỉ cần sử dụng lớp .spinner-border và lớp này sẽ tạo Spinner mặc định là màu đen.
<div class="container"> <h2>Spinners</h2> <div class="spinner-border"></div> </div>
Tô màu cho Spinner
Spinner mặc định khá xấu xí vì vậy bạn có thể sử dụng các lớp ngữ cảnh để thay đổi màu sắc cho con quay này. 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, .text-light
Ví dụ:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <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.0/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"> <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>
Kết quả như sau:
Spinner Growing (Spinner tín hiệu hình tròn)
Ngoài spinner mặc định Bootstrap 4 còn cung cấp 1 loại Spinner khác gọi là Growing có dạng chấm hình tròn ẩn hiện. Cách sử dụng là thêm lớp .spinner-grow. Và đương nhiên chúng ta cũng có thể sử 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.
Ví dụ:
<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>
Kích thước Spinner
Bootstrap 4 cũng hỗ trợ chúng ta các lớp như .spinner-border-sm hoặc .spinner-grow-sm để thay đổi kích thước Spinner. Lớp .spinner-border và .spinner-grow là mô tả Spinner có kích thước mặc định.
Ví dụ:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <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.0/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"> <h5>Kích thước con quay nhỏ</h5> <div class="spinner-border spinner-border-sm text-danger"></div> <div class="spinner-grow spinner-grow-sm text-info"></div> </div> </body> </html>
Spinner trong nút nhấn (Button)
Spinner còn có thể kết hợp với các button (nút nhấn) hay 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. Dưới đây là cách thêm 1 spinner vào nút .
<div class="container"> <h5>Spinner nút nhấn</h5> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm text-warning"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm text-danger"></span> Đang tải... </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm text-danger"></span> Đang tải... </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm text-danger"></span> Đang tải... </button> </div>
Lời kết:
Bài học này chúng mình chỉ đề cập đến cách đơn giản để tạo Spinner trong Bootstrap 4. Lẽ dĩ nhiên còn khá cơ bản và chưa đa dạng lắm vì vậy bạn cần tự trải nghiệm và nghiên cứu thêm để có kết quả tốt nhất. Chúc các bạn thành công!
