Bài 14: Spinner trong Bootstrap 5
Spinner trong Boostrap 5 là gì? Cách dùng Spinner trong Boostrap 5 như thế nào? Hãy cùng Quản Trị Mạng tìm hiểu nhé!
Spinner hiểu đơn giản là các biểu tượng hiển thị trạng thái đang tải trên web, ứng dụng… Spinner trong Boostrap 5 được phát triển hoàn toàn dựa trên CSS và HTML và không cần tới JavaScript.
Tuy nhiên, bạn sẽ cần một số JavaScript tùy chỉnh để chuyển đổi khả năng hiển thị của chúng. Hình thức, căn chỉnh và kích thước của chúng đều dễ dàng được tùy biến bằng các class tiện ích.
Cách tạo Spinner trong Bootstrap 5
Để tạo một spinner hay nút tải, dùng class .spinner-border:
<div class="spinner-border"></div>Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Spinners trong Quản Trị Mạng</h2>
<p>Để tạo trạng thái tải trang trong QuanTriMang, dùng class <code>.spinner-border</code>:</p>
<div class="spinner-border"></div>
</div>
</body>
</html>
Spinner màu sắc
Dùng bất kỳ tiện ích tô màu văn bản để thêm màu vào spinner mong muốn.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Spinner màu trên QuanTriMang.com</h2>
<p>Dùng bất kỳ <strong>tiện ích màu văn bản</strong> để tô màu cho spinner:</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 to dần
Dùng class .spinner-grow nếu bạn muốn spinner/nút tải lớn dần thay vì chỉ xoay tròn:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Spinner to dần trên QTM</h2>
<p>Dùng class <code>.spinner-grow</code> nếu muốn trạng thái tải là nút tròn lớn dần thay vì chỉ xoay tròn trên Quantrimang.com:</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
Dùng .spinner-border-sm hoặc .spinner-grow-sm để tạo một spinner nhỏ hơn
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Kích thước spinner</h2>
<p>Dùng <code>.spinner-border-sm</code> hoặc <code>.spinner-grow-sm</code> để tạo spinner nhỏ hơn trên Quantrimang.com:</p>
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
</div>
</body>
</html>
Các nút bấm Spinner
Bạn cũng có thể thêm spinner vào một nút bấm kèm hoặc không kèm text:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Spinner dạng nút bấm</h2>
<p>Thêm spinner vào các nút bấm trên Quantrimang.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>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>
</body>
</html>

Trên đây là các cách tạo spinner trong Bootstrap 5. So với tạo thanh tiến trình bằng Bootstrap 5, quá trình code nút trạng thái cho web hoặc ứng dụng như bạn thấy đơn giản hơn nhiều phải không?
Bạn nên đọc
-
Bài 4: Typography trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 5: Màu sắc trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 13: Progress Bars trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 11: Button Group trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:
Cũ vẫn chất
-

Tổng hợp phím tắt Đấu Trường Chân Lý
Hôm qua -

Câu nói hay về người thứ ba, stt về người thứ ba trong tình yêu thâm thúy
Hôm qua -

Cách quản lý mật khẩu đã lưu trên Microsoft Edge: Xem, xóa, sửa, xuất
Hôm qua -

Công thức Minecraft để chế tạo đồ cơ bản, thức ăn, công cụ dụng cụ, đồ bảo hộ, len, màu nhuộm
Hôm qua 1 -

Khắc phục tình trạng các phím chức năng không hoạt động trong Windows 10
Hôm qua -

Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính
Hôm qua 1 -

44 phím tắt hữu dụng trên tất cả trình duyệt
Hôm qua 2 -

Đăng ký Zalo, cách tạo tài khoản Zalo trên máy tính
Hôm qua 4 -

Cách tạo sticker tùy chỉnh trên Telegram
Hôm qua -

Cloudflare WARP là gì? Có nên sử dụng không?
Hôm qua 2
Học IT 
Microsoft Word 2013
Microsoft Word 2007
Microsoft Excel 2019
Microsoft Excel 2016
Microsoft PowerPoint 2019
Google Sheets
Lập trình Scratch
Bootstrap
Hướng dẫn
Ô tô, Xe máy