in English

Спиннерүүд

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

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

тухай

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

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

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

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

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

html

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

Өнгө

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

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>

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

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

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

html

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

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

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>

Тохируулга

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

Маржин

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

html

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

Байршил

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

Flex

html

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

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

html

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

Хөвөгч

html

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

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

html

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

Хэмжээ

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

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>

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

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>

Товчлуурууд

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

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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн аргын нэг хэсэг болгон спиннерүүд одоо локал CSS хувьсагчдыг бодит цагийн тохиргоонд ашиглаж .spinner-borderбайна .spinner-grow. CSS хувьсагчийн утгыг Sass-ээр тохируулдаг тул Sass-н тохиргоог дэмжсэн хэвээр байна.

Border spinner хувьсагч:

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

Өсөн нэмэгдэж буй ээрэх хувьсагч:

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

Эдгээр CSS хувьсагчийн утгыг шаардлагатай бол шинэчлэхийн тулд ээрэх хоёрын хувьд жижиг ээрэх хувиргагч ангиудыг ашигладаг. Жишээлбэл, .spinner-border-smанги дараахь зүйлийг хийдэг.

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

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;

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

Манай спиннерүүдэд зориулсан 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;
  }
}