Con quay
Cho biết trạng thái tải của một thành phần hoặc trang bằng trình quay Bootstrap, được xây dựng hoàn toàn bằng HTML, CSS và không có JavaScript.
Về
Bootstrap “spinners” có thể được sử dụng để hiển thị trạng thái tải trong các dự án của bạn. Chúng chỉ được tạo bằng HTML và CSS, có nghĩa là bạn không cần bất kỳ JavaScript nào để tạo chúng. Tuy nhiên, bạn sẽ cần một số JavaScript tùy chỉnh để chuyển đổi khả năng hiển thị của chúng. Sự xuất hiện, căn chỉnh và kích thước của chúng có thể dễ dàng tùy chỉnh với các lớp tiện ích tuyệt vời của chúng tôi.
Đối với các mục đích trợ năng, mỗi bộ tải ở đây bao gồm role="status"
và một bộ tải được lồng vào nhau <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
truy vấn phương tiện. Xem phần
chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .
Con quay biên giới
Sử dụng con quay đường viền để có chỉ báo tải nhẹ.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Màu sắc
Con quay viền sử dụng currentColor
cho nó border-color
, có nghĩa là bạn có thể tùy chỉnh màu sắc bằng các tiện ích màu văn bản . Bạn có thể sử dụng bất kỳ tiện ích màu văn bản nào của chúng tôi trên con quay tiêu chuẩn.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
các tiện ích? Mỗi con quay viền chỉ định một
transparent
đường viền cho ít nhất một mặt, vì vậy
.border-{color}
các tiện ích sẽ ghi đè lên đó.
Con quay đang phát triển
Nếu bạn không thích con quay viền, hãy chuyển sang con quay phát triển. Mặc dù nó không quay về mặt kỹ thuật, nhưng nó vẫn phát triển liên tục!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Một lần nữa, con quay này được tích hợp sẵn currentColor
, vì vậy bạn có thể dễ dàng thay đổi diện mạo của nó bằng các tiện ích màu văn bản . Ở đây nó có màu xanh lam, cùng với các biến thể được hỗ trợ.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Căn chỉnh
Spinners trong Bootstrap được xây dựng bằng rem
s currentColor
, và display: inline-flex
. Điều này có nghĩa là chúng có thể dễ dàng được thay đổi kích thước, đổi màu và nhanh chóng căn chỉnh.
Lề
Sử dụng các tiện ích lề như .m-5
để có khoảng cách dễ dàng.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Vị trí
Sử dụng các tiện ích flexbox , tiện ích float hoặc các tiện ích căn chỉnh văn bản để đặt các trình quay chính xác ở nơi bạn cần trong mọi tình huống.
Uốn cong
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Phao
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Căn chỉnh văn bản
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Kích thước
Thêm .spinner-border-sm
và .spinner-grow-sm
tạo một con quay nhỏ hơn có thể nhanh chóng được sử dụng trong các thành phần khác.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Hoặc, sử dụng CSS tùy chỉnh hoặc kiểu nội tuyến để thay đổi kích thước nếu cần.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
nút
Sử dụng con quay trong các nút để cho biết một hành động hiện đang được xử lý hoặc đang diễn ra. Bạn cũng có thể hoán đổi văn bản ra khỏi phần tử xoay và sử dụng văn bản nút nếu cần.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>