Спиннерҳо

Ҳолати боркунии ҷузъ ё саҳифаро бо spinners Bootstrap, ки комилан бо HTML, CSS ва бидуни JavaScript сохта шудаанд, нишон диҳед.

Дар ин саҳифа

Дар бораи

"Spinners"-и bootstrap метавонад барои нишон додани ҳолати боркунӣ дар лоиҳаҳои шумо истифода шавад. Онҳо танҳо бо 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, яъне шумо метавонед рангро бо утилитаҳои ранги матн танзим кунед . Шумо метавонед ягон утилитаҳои ранги матнии моро дар 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, ва display: inline-flex. Ин маънои онро дорад, ки онҳоро ба осонӣ тағир додан, ранг кардан ва зуд мувофиқ кардан мумкин аст.

Маржа

Утилитҳои маржаро истифода баред, ба монанди .m-5фосилаи осон.

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

Ҷойгиркунӣ

Утилитҳои flexbox , utilities шинокунанда ё утилитаҳои ҳамоҳангсозии матнро истифода баред , то спиннерҳоро дар ҳама гуна вазъият маҳз дар ҷое ҷойгир кунед.

Flex

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

Loading...

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

Тугмаҳо

Спиннерҳоро дар дохили тугмаҳо истифода баред, то нишон диҳед, ки амал ҳоло коркард ё сурат мегирад. Шумо инчунин метавонед матнро аз унсури spinner иваз кунед ва дар ҳолати зарурӣ матни тугмаро истифода баред.

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