Bootstrap 4 - Bootstrap Spinners

Spinner trong Bootstrap

Spinner là các biểu tượng hiển thị trạng thái đang tải, chẳng hạn như trạng thái đang tải ứng dụng, trang web, ... và được phát triển dựa trên HTML và CSS. Tuy nhiên để hiển thị hoặc ẩn spinner trên trang web, chúng ta sẽ phải sử dụng JavaScript tùy chỉnh.

Ngoài ra chúng ta cũng có thể dễ dàng tùy chỉnh giao diện, kích thước và căn chỉnh các spinner bằng cách sử dụng các lớp tiện ích được xác định trước.

Để tạo một spinner, chúng ta sử dụng lớp .spinner-border như trong ví dụ dưới đây:

<div class="spinner-border">
    <span class="sr-only">Loading...</span>
</div>

Xem ví dụ


Tạo Spinner Với Các Màu Sắc Khác Nhau

Bằng cách sử dụng các lớp tiện ích màu sắc để tùy chỉnh màu sắc cho spinner như trong ví dụ dưới đây:

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

Xem ví dụ

 


Tạo Spinner Động

Ngoài ra chúng ta cũng có thể tạo các spinner động, dạng kiểu hiển thị biểu tượng sau đó mờ dần.

Ví dụ: Ví dụ dưới đây minh họa cách tạo spinner động trong Bootstrap:

<div class="spinner-grow">
    <span class="sr-only">Loading...</span>
</div>

Xem ví dụ

Tương tự, chúng ta cũng có thể tùy chỉnh màu sắc của các spinner động bằng cách sử dụng các lớp tiện ích màu sắc như trong ví dụ dưới đây:

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

Xem ví dụ


Kích Thước Spinner

Bằng cách sử dụng lớp .spinner-border-sm và lớp .spinner-grow-sm để tạo spinner có kích thước nhỏ hơn, được sử dụng trong các thành phần khác như các nút.

Ví dụ: Trong ví dụ dưới đây minh họa cách thay đổi kích thước spinner trong Bootstrap:

<div class="spinner-border spinner-border-sm">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
    <span class="sr-only">Loading...</span>
</div>

Xem ví dụ

Hoặc ngoài ra chúng ta cũng có thể sử dụng CSS tùy chỉnh để thay đổi kích thước spinner.

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

Xem ví dụ 


Thêm Spinner Vào Các Nút Trong Bootstrap

Bằng cách thêm spinner trong các nút để người dùng dễ dàng hình dung hành động hoặc tác vụ hiện tại đang được xử lý.

Ví dụ: trong ví dụ dưới đây minh họa thêm các spinner trong các nút bị vô hiệu hóa:

<!-- Border spinners inside buttons -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    <span class="sr-only">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="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading...
</button>

Xem ví dụ


Căn Chỉnh Spinner Trong Bootstrap

Để căn chỉnh các spinner trong Bootstrap sang trái, phải hoặc chính giữa, chúng ta sử dụng các lớp căn chỉnh văn bản, lớp flexbox hoặc lớp float.

Ví dụ: Ví dụ dưới đây minh họa cách căn chỉnh spinner trong Bootstrap:

<!-- Center alignment using flex utilities -->
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Center alignment using text alignment utilities -->
<div class="text-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Right alignment using float utilities -->
<div class="clearfix">
    <div class="spinner-border float-right" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

Xem ví dụ