Перейти до основного вмісту Перейти до навігації документами
in English

Спінери

Указуйте стан завантаження компонента або сторінки за допомогою механізмів Bootstrap, створених повністю за допомогою HTML, CSS і без JavaScript.

про

«Спінери» 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, що означає, що ви можете налаштувати колір за допомогою утиліт кольору тексту . Ви можете використовувати будь-яку з наших утиліт кольору тексту на стандартному спінері.

Завантаження...
Завантаження...
Завантаження...
Завантаження...
Завантаження...
Завантаження...
Завантаження...
Завантаження...
<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 , утиліти float або утиліти вирівнювання тексту , щоб розташувати прядки саме там, де вони вам потрібні в будь-якій ситуації.

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>

Поплавці

Завантаження...
<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>

Сасс

Змінні

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