Bootstrap Spinner

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap Spinner.

Tạo Spinner với Bootstrap

Bootstrap giới thiệu thành phần spinner mới mà bạn có thể sử dụng để hiển thị trạng thái đang tải trong các ứng dụng của mình. Spinner thường là các icon hiển thị trạng thái đang tải và chúng chỉ được xây dựng bằng HTML và CSS. Tuy nhiên, bạn cần một số JavaScript tùy chỉnh để hiển thị hoặc ẩn chúng trên một trang web.

Hơn nữa, bạn có thể dễ dàng tùy chỉnh hình thức và kích thước của các spinner với các lớp tiện ích được định nghĩa trước. Bây giờ, chúng ta hãy xem cách tạo chúng.

Tạo Spinner có viền

Bạn có thể tạo một spinner có viền như sau:

<div class="spinner-border">
    <span class="visually-hidden">Loading...</span>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Lớp đặc biệt .visually-hidden ẩn một phần tử đối với tất cả các thiết bị ngoại trừ trình đọc màn hình.

Tạo Spinner màu

Bạn có thể sử dụng các lớp tiện ích màu văn bản để tùy chỉnh màu của spinner.

<div class="spinner-border text-primary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light">
    <span class="visually-hidden">Loading...</span>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo Spinner lớn dần

Bạn cũng có thể tạo spinner ngày càng lớn dân như sau:

<div class="spinner-grow">
    <span class="visually-hidden">Loading...</span>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tương tự, giống như các spinner có viền, bạn cũng có thể tùy chỉnh màu sắc của các spinner lớn dần bằng cách sử dụng các lớp tiện ích màu văn bản của Bootstrap, như được hiển thị trong ví dụ sau:

<div class="spinner-grow text-primary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark">
    <span class="visually-hidden">Loading...</span>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Định kích thước của Spinner

Bạn có thể sử dụng lớp .spinner-border-sm và .spinner-grow-sm để tạo một spinner nhỏ hơn để có thể sử dụng trong các thành phần khác như button.

<div class="spinner-border spinner-border-sm">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
    <span class="visually-hidden">Loading...</span>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Ngoài ra, bạn có thể sử dụng CSS tùy chỉnh hoặc các kiểu nội tuyến để thay đổi kích thước nếu cần.

<div class="spinner-border" style="width: 40px; height: 40px;">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
    <span class="visually-hidden">Loading...</span>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Sử dụng Spinner trong Button

Bạn cũng có thể sử dụng spinner trong các button để cho biết một hành động hiện đang được xử lý hoặc đang diễn ra.

Đây là một ví dụ mà chúng tôi đã đặt các spinner bên trong các button bị khóa.

<!-- Border spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
</button>	

<!-- Growing spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading...
</button>

Kết quả của ví dụ trên sẽ giống như sau:

Căn chỉnh Spinner

Bạn có thể dễ dàng căn chỉnh spinner sang trái, phải hoặc giữa bằng cách sử dụng các lớp tiện ích flexbox. Hãy thử ví dụ sau và xem nó thực sự hoạt động như thế nào:

<!-- Center align spinner using flex utilities -->
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

<!-- Center align spinner using text alignment utilities -->
<div class="text-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>