Spinner trong bootstrap 5

11/12
Thạch
Bootstrap 5
0
203

Spinner trong Boostrap 5 là gì? Cách dùng Spinner trong Boostrap 5 như thế nào? Hãy cùng Sinitc.com tìm hiểu nhé!

Bài 13: Progress Bars trong Bootstrap 5

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h2>Spinners trong Sinitc.com</h2>
<p>Để tạo trạng thái tải trang trong Sinitc.com, 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h2>Spinner màu trên Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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ài 15: Pagination trong Bootstrap 5