Source

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

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

Tại sao không sử dụng border-colorcá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 rems currentColor, và display: inline-flex. Điều này có nghĩa là chúng có thể dễ dàng thay đổi kích thước, đổi màu và căn chỉnh nhanh chóng.

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>

Đang tải...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Phao nổi

<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-smvà .spinner-grow-smtạ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>