Ở phần trước, bạn đã học cách tạo Spinner đơn giản, ở phần này bạn sẽ tiếp tục học các cách tùy biến Spinner để giúp cho bạn có nhiều cách hiển thị Spinner đa dạng hơn trên trang Web.
Canh lề cho Spinner
Sử dụng thuộc tính Margin, Padding
Để canh lề cho Spinner, bạn buộc phải sử dụng một số lớp canh lề như theo khoảng trắng như .m, .m-1,…,.m-5 (margin) và .p, .p-1,…, .p-5 (padding). Ví dụ canh lề bằng lớp .m-5 có nghĩa bạn cách lề theo thuộc tính margin: 3rem!important;. Trong đó rem là 1 đơn vị kích thước font chữ, bạn thêm tìm hiểu thêm ở bài So sánh các đơn vị đo kích thước font trong HTML.
<!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>Canh lề Spinner bằng lớp m-5</h2> <div class="spinner-border m-5" role="status"> <span class="sr-only">Đang tải...</span> </div> </div> </body> </html>
Flexbox
Ngoài cách sử dụng thuộc tính margin và padding, bạn còn có thể sử dụng flexbox như 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"> <h4>Canh giữa Spinner bằng flexbox --- dammio.com</h4> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="sr-only">Đang tải...</span> </div> </div> </div> </body> </html>
Float
Bạn cũng có thể dùng khái niệm float-left, float-right để canh lề cho Spinner.
<!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"> <h4>Canh giữa Spinner bằng float-right, float-left --- dammio.com</h4> <div class="clearfix"> <div class="spinner-border float-right" role="status"> <span class="sr-only">Loading...</span> </div> <div class="clearfix"> <div class="spinner-border float-left" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div> </body>
Canh dòng văn bản
Bạn còn có thể canh lề cho Spinner bằng các thuộc tính text-align, text-center.
<!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"> <h4>Canh giữa Spinner bằng text-center --- dammio.com</h4> <div class="text-center"> <div class="spinner-border" role="status"> <span class="sr-only">Đang tải...</span> </div> </div> </div> </div> </body> </html>
Tạo hình cho Spinner
Tạo hình bằng thuộc tính border-radius
Thuộc tính .border-radius dùng để tạo góc bo tròn cho một đối tượng trong HTML. Bạn có thể sử dụng thuộc tính này để tạo ra các hình Spinner khác nhau như 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ạo hình cho Spinner bằng thuộc tính border-radius --- dammio.com</h2> <p>Sử dụng border-radius với giá trị từ 0 đến 50% để tạo hình:</p> <div class="spinner-border text-muted" style="border-radius:0%"></div> <div class="spinner-border text-primary" style="border-radius:5%"></div> <div class="spinner-border text-success" style="border-radius:15%"></div> <div class="spinner-border text-info" style="border-radius:25%"></div> <div class="spinner-border text-warning" style="border-radius:35%"></div> <div class="spinner-border text-danger"></div> <div class="spinner-grow text-muted" style="border-radius:0%"></div> <div class="spinner-grow text-primary" style="border-radius:5%"></div> <div class="spinner-grow text-success" style="border-radius:15%"></div> <div class="spinner-grow text-info" style="border-radius:25%"></div> <div class="spinner-grow text-warning" style="border-radius:35%"></div> <div class="spinner-grow text-danger"></div> </div> </body> </html>
Tạo hình thuộc tính width, height
Để có nhiều dạng Spinner lạ lùng hơn nữa, bạn có thể kết hợp thêm thuộc tính width và height trong CSS như 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ạo hình cho Spinner bằng thuộc tính width, height --- dammio.com</h2> <div class="spinner-border text-muted" style="width:0rem"></div> <div class="spinner-border text-primary" style="width:1rem"></div> <div class="spinner-border text-success" style="width:2rem"></div> <div class="spinner-border text-info" style="width:3rem"></div> <div class="spinner-border text-warning" style="width:4rem"></div> <div class="spinner-border text-muted" style="width:10rem;height:10rem"></div> <div class="spinner-border text-danger"></div> <div class="spinner-grow text-muted" style="width:0rem"></div> <div class="spinner-grow text-primary" style="width:1rem"></div> <div class="spinner-grow text-success" style="width:2rem"></div> <div class="spinner-grow text-info" style="width:3rem"></div> <div class="spinner-grow text-warning" style="width:4rem"></div> <div class="spinner-grow text-danger" style="width:10rem;height:10rem"></div> <div class="spinner-grow text-danger"></div> </div> </body> </html>
Tạo hình thuộc tính border-right-color
Thuộc tính này giúp tạo một Spinner dạng mặc định không bị khuyết 1 cung trong vòng tròn hoặc tô màu cung đó bằng màu sắc khác thay vì màu transparency (trong suốt). Nếu bạn áp dụng với thuộc tính width hoặc height, bạn sẽ có dạng Spinner quay bất đối xứng như 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ạo hình cho Spinner bằng thuộc tính border-right-color và width, height --- dammio.com</h2> <div class="spinner-border text-muted" style="border-right-color:initial;width:0rem"></div> <div class="spinner-border text-primary" style="border-right-color:initial;width:1rem"></div> <div class="spinner-border text-info" style="border-right-color:initial;width:3rem"></div> <div class="spinner-border text-warning" style="border-right-color:initial;width:4rem"></div> <div class="spinner-border text-muted" style="border-right-color:initial;height:0rem"></div> <div class="spinner-border text-primary" style="border-right-color:initial;height:1rem"></div> <div class="spinner-border text-info" style="border-right-color:initial;height:3rem"></div> <div class="spinner-border text-warning" style="border-right-color:initial;height:4rem"></div> <div class="spinner-border text-muted" style="border-right-color:blue;"></div> <div class="spinner-border text-primary" style="border-right-color:red;"></div> <div class="spinner-border text-info" style="border-right-color:green;"></div> <div class="spinner-border text-warning" style="border-right-color:pink;"></div> </div> </body> </html>
Kết luận
Bài viết đã cung cấp cho bạn nhiều ví dụ để bạn có thể canh chỉnh, tạo hình cho con quay với hình thái khác nhau. Mời bạn tiếp tục theo dõi bài tiếp theo.
- APA:
Dammio. (2019). [Bootstrap 4] Phần 15: Spinner (Con quay) nâng cao. https://www.dammio.com/2019/12/10/bootstrap-4-phan-15-spinner-con-quay-nang-cao.
- BibTeX:
@misc{dammio,
author = {Dammio},
title = {[Bootstrap 4] Phần 15: Spinner (Con quay) nâng cao},
year = {2019},
url = {https://www.dammio.com/2019/12/10/bootstrap-4-phan-15-spinner-con-quay-nang-cao},
urldate = {2024-12-07}
}
[…] [Bootstrap 4] Phần 15: Spinner (Con quay) nâng cao – 10 tháng 12, 2019 lúc 7:50:19 Sáng […]
[…] [Bootstrap 4] Phần 15: Spinner (Con quay) nâng cao – 10 tháng 12, 2019 lúc 7:50:19 Sáng […]