in English

Spinners

Толугу менен HTML, CSS менен курулган жана JavaScript жок Bootstrap спиннерлери менен компоненттин же беттин жүктөлүү абалын көрсөтүңүз.

Бул бетте

Жөнүндө

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>

Түстөр

Чек спиннер currentColorанын үчүн колдонот border-color, демек сиз түстү текст түсүнүн утилиталары менен ыңгайлаштыра аласыз . Сиз стандарттык спиннерде биздин текст түстүү утилиталарыбызды колдоно аласыз.

<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, жана менен курулган 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>

Floats

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

Buttons

Учурда иштетилип же болуп жаткан аракетти көрсөтүү үчүн баскычтардын ичиндеги спиннерлерди колдонуңуз. Сиз ошондой эле спиннер элементинен текстти алмаштырып, керек болсо баскычтын текстин колдонсоңуз болот.

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

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