Công cụ quay vòng Bootstrap 4
Máy kéo sợi
Để tạo một spinner/loader, hãy sử dụng lớp .spinner-border
:
Máy quay màu
Sử dụng bất kỳ công cụ màu văn bản nào để thêm màu vào vòng xoay:
Ví dụ
<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>
Hãy tự mình thử » Máy kéo sợi đang phát triển
Sử dụng lớp .spinner-grow
nếu bạn muốn spinner/loader phát triển thay vì "spin":
Ví dụ
<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>
Hãy tự mình thử »Kích thước con quay
Sử dụng .spinner-border-sm
hoặc .spinner-grow-sm
để tạo một công cụ quay vòng nhỏ hơn:
Ví dụ
<div class="spinner-border
spinner-border-sm"></div>
<div class="spinner-grow
spinner-grow-sm"></div>
Hãy tự mình thử »Nút quay
Bạn cũng có thể thêm vòng quay vào một nút, có hoặc không có văn bản:
Ví dụ
<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>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
Hãy tự mình thử »