Спиннерүүд

Бүрэлдэхүүн хэсэг эсвэл хуудасны ачааллын төлөвийг бүхэлд нь HTML, CSS-ээр бүтээгдсэн, JavaScript-гүй, Bootstrap spinner-тэй зааж өгнө үү.

Энэ хуудсан дээр

тухай

Bootstrap "spinners" нь таны төслүүдийн ачааллын төлөвийг харуулахад ашиглагдаж болно. Тэдгээр нь зөвхөн HTML болон CSS-ээр бүтээгдсэн тул тэдгээрийг үүсгэхийн тулд танд ямар ч JavaScript хэрэггүй. Гэсэн хэдий ч танд тэдгээрийн харагдах байдлыг өөрчлөхийн тулд зарим нэг захиалгат JavaScript хэрэгтэй болно. Гайхамшигтай хэрэглээний ангиудын тусламжтайгаар тэдгээрийн гадаад төрх, тэгш байдал, хэмжээг хялбархан өөрчилж болно.

Хүртээмжтэй байдлын үүднээс энд ачигч бүр role="status"болон үүрлэсэн <span class="visually-hidden">Loading...</span>.

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Хилийн эргүүлэгч

Хөнгөн ачааллын индикаторын хувьд хилийн эргүүлэгчийг ашиглана уу.

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

Өнгө

Border spinner нь currentColorтүүний border-colorхувьд ашигладаг бөгөөд энэ нь та текстийн өнгөний хэрэгслээр өнгийг өөрчлөх боломжтой гэсэн үг юм. Та стандарт spinner дээр манай текстийн өнгөт хэрэглүүрийг ашиглаж болно.

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

Яагаад border-colorхэрэгслүүдийг ашиглаж болохгүй гэж? Хилийн ээрүүлэгч бүр transparentдор хаяж нэг талын хил хязгаарыг зааж өгдөг тул .border-{color}хэрэгслүүд үүнийг хүчингүй болгодог.

Өсөн нэмэгдэж буй спиннер

Хэрэв та хилийн ээрэх машинд дургүй бол ургуулагч ээрэх төхөөрөмж рүү шилжинэ үү. Техникийн хувьд эргэдэггүй ч дахин дахин ургадаг!

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Дахин хэлэхэд энэ спиннер нь -ээр бүтээгдсэн тул та текстийн өнгөний хэрэгслүүдийнcurrentColor тусламжтайгаар түүний гадаад төрхийг хялбархан өөрчлөх боломжтой . Энд дэмжигдсэн хувилбаруудын хамт цэнхэр өнгөтэй байна.

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

Зохицуулах

Bootstrap дээрх спиннерүүд нь rems, currentColor, and -ээр бүтээгдсэнdisplay: inline-flex . Энэ нь тэдгээрийн хэмжээг хялбархан өөрчилж, өнгийг нь өөрчилж, хурдан зэрэгцүүлж болно гэсэн үг.

Маржин

Хялбар зай гаргах гэх мэт маржин хэрэгслүүдийг ашиглана уу..m-5

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Байршил

Спиннерүүдийг ямар ч нөхцөлд яг хэрэгтэй газарт нь байрлуулахын тулд flexbox хэрэгсэл , хөвөх хэрэгсэл эсвэл текстийг тэгшитгэх хэрэгслийг ашиглана уу.

Flex

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

Ачааж байна...

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

Хөвөгч

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

Текстийг зэрэгцүүлэх

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Хэмжээ

Нэмэх .spinner-border-smба .spinner-grow-smбусад бүрэлдэхүүн хэсгүүдэд хурдан ашиглах боломжтой жижиг ээрэх төхөөрөмж хийх.

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

Эсвэл шаардлагатай бол хэмжээсийг өөрчлөхийн тулд тусгай CSS эсвэл шугаман хэв маягийг ашиглана уу.

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

Товчлуурууд

Үйлдлийг боловсруулж байгаа эсвэл хийгдэж байгааг харуулахын тулд товчлуур доторх эргүүлэгчийг ашиглана уу. Та мөн ээрэх элементээс текстийг сольж, шаардлагатай бол товчлуурын текстийг ашиглаж болно.

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

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

Сасс

Хувьсагч

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

Түлхүүр фрэймүүд

Манай спиннерүүдэд зориулсан CSS хөдөлгөөнт дүрсийг бүтээхэд ашигладаг. -д багтсан scss/_spinners.scss.

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

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