Спінери

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

На цій сторінці

про

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

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>

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

Flex

html

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

Завантаження...

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>

кнопки

Використовуйте ручки всередині кнопок, щоб вказати дію, яка зараз виконується або виконується. Ви також можете замінити текст елемента обертання та використовувати текст кнопки за потреби.

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

Як частина розвитку підходу Bootstrap до змінних CSS, прямільники тепер використовують локальні змінні 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;

Зростаючі змінні спінера:

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

Для обох спінерів невеликі класи модифікаторів спінерів використовуються для оновлення значень цих змінних 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;
  }
}