Tạo Spinner trong Bootstrap 5 (mới nhất 2023)

Spinner trong Bootstrap 5 là một thành phần hữu ích để hiển thị biểu tượng vòng quay trong quá trình tải dữ liệu hoặc xử lý. Với Bootstrap 5, việc tạo Spinner trở nên dễ dàng hơn bao giờ hết. Bạn có thể tạo Spinner bằng cách sử dụng class “spinner-border” và “text-info” để chỉ định màu sắc cho biểu tượng. Bên cạnh đó, bạn cũng có thể điều chỉnh kích thước của Spinner bằng cách thêm class “spinner-border-sm” hoặc “spinner-border-lg”. Dễ dàng tạo Spinner theo ý muốn và tương thích hoàn hảo với Bootstrap 5.

Spinner trong Bootstrap 5 có chức năng trình bày biểu thị khối lượng làm việc hiện đang xử lý.

Spinner trong Bootstrap 5 là thành phần gì? Làm cách nào để sử dụng Spinner trong Bootstrap 5? Hãy cùng Quản Trị Mạng tìm hiểu!

Spinner có thể được hiểu một cách đơn giản là các biểu tượng được hiển thị để chỉ trạng thái đang tải trên các trang web, ứng dụng… Spinner trong Boostrap 5 đã được phát triển hoàn toàn bằng CSS và HTML và không cần sử dụng JavaScript.

Tuy nhiên, để tùy chỉnh khả năng hiển thị của chúng, bạn sẽ cần sử dụng JavaScript tùy chỉnh. Bạn có thể dễ dàng điều chỉnh hình dạng, căn chỉnh và kích thước của chúng bằng cách sử dụng các class tiện ích.

Cách tạo Spin trong Bootstrap 5

Để tạo một spinner hoặc nút tải, sử dụng class .spinner-border:

<div ></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" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
<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 ></div>
</div>

</body>
</html>

Spinner màu sắc

Sử dụng công cụ tô màu văn bản bất kỳ để 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" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
<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 ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>

</body>
</html>

Spinner to dần

Sử dụng lớp .spinner-grow nếu bạn muốn spinner/nút tải phát triển từ nhỏ đến lớn thay vì chỉ quay 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" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
<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 ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>

</body>
</html>

Kích thước Spinner

Sử 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" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
<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 ></div>
<div ></div>
</div>

</body>
</html>

Các nút bấm Spinner

Bạn cũng có thể đặt một spinner vào một nút, có thể 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" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <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 >
    <span ></span>
  </button>

  <button >
    <span ></span>
    Loading..
  </button>
  
  <button  disabled>
    <span ></span>
    Loading..
  </button>
  
  <button  disabled>
    <span ></span>
    Loading..
  </button>
</div>

</body>
</html>

Dưới đây là những cách khác nhau để tạo spinner trong Bootstrap 5. So với việc tạo thanh tiến trình bằng Bootstrap 5, quá trình viết mã cho các nút trạng thái cho web hoặc ứng dụng trở nên đơn giản hơn rất nhiều, bạn đồng ý chứ?

Nguồn: Bài 14: Spinner trong Bootstrap 5

Nguồn: Bài 14: Chỉ chạy và giữ trong Slack của Bootstrap 5