Bootstrap 5 Tải

Điều khiển

Để tạo spinner/điều khiển, hãy sử dụng .spinner-border Loại:

Mô hình

<div class="spinner-border"></div>

Thử ngay

Điều khiển tăng lên màu sắc

Hãy sử dụng bất kỳ màu văn bản nào trong utilities để thêm màu sắc cho spinner:

Mô hình

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

Thử ngay

Điều khiển tăng lên

Nếu bạn muốn spinner/điều khiển tăng lên thay vì "xoay", hãy sử dụng .spinner-grow Loại:

Mô hình

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

Thử ngay

Kích thước bộ tải

Vui lòng sử dụng .spinner-border-sm hoặc .spinner-grow-sm Tạo bộ tải nhỏ hơn:

Mô hình

<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

Thử ngay

Nút tải

Bạn có thể thêm bộ tải vào nút, có hoặc không có văn bản:

Mô hình

<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>
  Đang tải...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Đang tải...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Đang tải...
</button>

Thử ngay