Спиннерҳо

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

Дар ин саҳифа

Дар бораи

"Spinners"-и bootstrap метавонад барои нишон додани ҳолати боркунӣ дар лоиҳаҳои шумо истифода шавад. Онҳо танҳо бо 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>

Рангҳо

Спиннери сарҳадӣ 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>

Бори дигар, ин spinner 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>

Loading...

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>

Тугмаҳо

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

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

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, spinners ҳоло тағирёбандаҳои CSS-и маҳаллиро дар .spinner-borderва .spinner-growбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

Тағйирёбандаҳои сарҳадӣ:

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

Тағирёбандаҳои афзояндаи spinner:

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

Барои ҳарду spinner, синфҳои хурди тағирдиҳандаи spinner барои навсозии арзишҳои ин тағирёбандаҳои 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;
  }
}