Спиннерлар

Bootstrap әйләндергечләре белән компонентның яки битнең йөкләү халәтен күрсәтегез, тулысынча HTML, CSS белән төзелгән, һәм JavaScript юк.

Бу биттә

Турында

Ботстрап “әйләндергечләр” сезнең проектларда йөкләү халәтен күрсәтү өчен кулланылырга мөмкин. Алар HTML һәм CSS белән генә төзелгән, димәк, аларны ясау өчен сезгә JavaScript кирәк түгел. Сезгә күренүчәнлеген үзгәртү өчен сезгә махсус JavaScript кирәк булачак. Аларның тышкы кыяфәте, тигезләнеше, зурлыгы безнең гаҗәеп файдалы класслар белән җиңел көйләнә ала.

Мөмкинлек максатларында, мондагы һәр йөкләүче үз эченә ала role="status"һәм ояланган <span class="visually-hidden">Loading...</span>.

Бу компонентның анимация эффекты prefers-reduced-motionмедиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз .

Чик әйләндергеч

Aиңел йөкләү индикаторы өчен чик әйләндергечләрен кулланыгыз.

<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коммуналь хезмәтләрне кулланмаска? Eachәрбер чик әйләндергеч transparentким дигәндә бер ягы өчен чикне билгели, шуңа күрә .border-{color}коммуналь хезмәтләр моны кире кагарлар.

Spсүче әйләндергеч

Әгәр дә сез чик әйләндергечне яратмыйсыз икән, үсүче әйләндергечкә күчә. Техник яктан әйләнмәсә дә, ул берничә тапкыр үсә!

<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. Димәк, алар җиңел үзгәртелергә, төсләргә һәм тиз тигезләнергә мөмкин.

Маргин

Easyиңел аралар өчен маржа ярдәмен кулланыгыз ..m-5

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

Урнаштыру

Флексбокс инженерлыкларын , йөзү программаларын яки текстны тигезләү программаларын кулланыгыз.

Флекс

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

Сасс

Variзгәрешләр

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