Hướng dẫn học Bootstrap
Spinner trong Bootstrap 5 là một thành phần giúp hiển thị biểu tượng quay vòng để chỉ ra rằng một tác vụ đang được thực hiện hoặc chờ đợi. Dưới đây là cách sử dụng Spinner trong Bootstrap 5:
- Bước 1: Thêm Spinner vào trang web của bạn Bạn có thể sử dụng Spinner thông qua thẻ
divvới lớpspinnervàborderhoặcgrowđể tạo biểu tượng quay vòng. Bạn cũng có thể thêm lớptext-*để đặt màu chữ cho Spinner.
Ví dụ về Spinner với biểu tượng quay vòng:
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Ví dụ về Spinner với biểu tượng phát triển (grow):
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
- Bước 2: Thêm mô tả hoặc thông báo Bạn có thể thêm một văn bản hoặc thông báo để mô tả tác vụ đang được thực hiện bằng cách sử dụng thẻ
<span>bên trong Spinner. Trong ví dụ ở trên, chúng tôi đã sử dụng<span class="visually-hidden">Loading...</span>để thêm một thông báo “Loading…” ẩn đi để mô tả tình trạng của Spinner. Bạn có thể thay đổi nội dung và màu sắc của thông báo tùy thích. - Bước 3: Điều chỉnh kích thước Spinner (tuỳ chọn) Nếu bạn muốn điều chỉnh kích thước của Spinner, bạn có thể sử dụng các lớp
spinner-border-sm,spinner-border-lg,spinner-grow-sm,spinner-grow-lgđể làm điều đó. Ví dụ:
<div class="spinner-border spinner-border-sm text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
- Bước 4: Sử dụng JavaScript (tuỳ chọn) Nếu bạn muốn tương tác với Spinner bằng JavaScript, bạn có thể sử dụng các sự kiện và phương thức của JavaScript để điều khiển nó. Thường thì Spinner được sử dụng để chỉ định rằng một tác vụ đang được thực hiện và không cần tương tác trực tiếp với nó bằng JavaScript.
Dưới đây là ví dụ cơ bản về cách sử dụng Spinner trong Bootstrap 5. Bạn có thể tùy chỉnh nó bằng cách thêm lớp và thay đổi nội dung mô tả tùy theo nhu cầu của bạn.
Dưới đây là một ví dụ cụ thể về cách sử dụng Spinner trong Bootstrap 5 để hiển thị biểu tượng quay vòng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spinner Example</title>
<!-- Sử dụng Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Loading Data</h1>
<!-- Spinner quay vòng -->
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- Sử dụng Bootstrap JavaScript (tuỳ chọn) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
Trong ví dụ này, chúng tôi sử dụng Spinner quay vòng màu xanh (text-primary) và có một thông báo “Loading…” để mô tả tình trạng Spinner.
Sau khi bạn sao chép mã này vào một tệp HTML và mở tệp đó trong trình duyệt, bạn sẽ thấy Spinner quay vòng và thông báo “Loading…” xuất hiện, chỉ ra rằng dữ liệu đang được tải.
Nhớ rằng bạn cần sử dụng các tệp CSS và JavaScript của Bootstrap từ một nguồn bên ngoài, như CDNs, để tạo chức năng Bootstrap. Trong ví dụ trên, chúng tôi đã sử dụng CDNs cho Bootstrap CSS và JavaScript.
Spinner trong Bootstrap 5