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.

Trên trang này

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="visually-hidden">Loading...</span>.

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy 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ẹ.

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">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.

html

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">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!

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">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ợ.

html

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">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 đượ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.

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">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

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Đang tải...

html

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

Phao

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Căn chỉnh văn bản

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">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.

html

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">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.

html

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">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.

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, các trình quay vòng hiện sử dụng các biến CSS cục bộ trên .spinner-bordervà .spinner-growđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

Các biến con quay biên giới:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Các biến spinner đang phát triển:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Đối với cả hai trình quay, các lớp công cụ sửa đổi vòng quay nhỏ được sử dụng để cập nhật giá trị của các biến CSS này khi cần thiết. Ví dụ, .spinner-border-smlớp làm như sau:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Biến Sass

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

Khung hình chính

Được sử dụng để tạo hoạt ảnh CSS cho các trình quay vòng của chúng tôi. Bao gồm trong scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}