Bootstrap 5 — Spinners

Bootstrap 5 е в алфа версия, когато това е написано и подлежи на промяна.

Bootstrap е популярна UI библиотека за всякакви JavaScript приложения.

В тази статия ще разгледаме как да добавите спинери с Bootstrap 5.

Спинери

Spinners ни позволява да добавим състоянието на зареждане на компонент или страница с Bootstrap spinners.

Той не използва JavaScript, за да го реализира.

Граничен спинър

Можем да добавим граничен спинер с класа spinner-border:

<div class="spinner-border">
  <span class="sr-only">Loading...</span>
</div>

Добавихме класа spinner-border и span с класа sr-only за екранни четци.

Цветове

Можем да приложим различни цветове към спинерите.

Например, можем да напишем:

<div class="spinner-border text-primary">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark">
  <span class="sr-only">Loading...</span>
</div>

Добавяме text-* класове, за да добавим цветовете към спинера.

Растящ Spinner

Можем да добавим растящ спинър с класа spinner-grow.

Например, можем да напишем:

<div class="spinner-grow">
  <span class="sr-only">Loading...</span>
</div>

Можем също да променим цвета с различни класове:

<div class="spinner-grow text-primary">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark">
  <span class="sr-only">Loading...</span>
</div>

Подравняване

Можем да променим подравняването на центрофугата.

Например, можем да добавим полета към тях:

<div class="spinner-border m-5">
  <span class="sr-only">Loading...</span>
</div>

Разположението може да се зададе с justify-content-* класове:

<div class="d-flex justify-content-center">
  <div class="spinner-border">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Можем да имаме и плувки:

<div class="clearfix">
  <div class="spinner-border float-right">
    <span class="sr-only">Loading...</span>
  </div>
</div>

float-right поставя спинера отдясно.

Можем също да зададем text-align:

<div class="text-center">
  <div class="spinner-border">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Размер

Можем да променим размера на центрофугата.

Можем да добавим класовете spinner-border-sm или spinner-grow-sm, за да направим по-малък спинер:

<div class="spinner-border spinner-border-sm">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
  <span class="sr-only">Loading...</span>
</div>

Можем също да променим размера:

<div class="spinner-border" style="width: 5rem; height: 5rem;">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 5rem; height: 5rem;">
  <span class="sr-only">Loading...</span>
</div>

Бутони

Можем да добавим спинери към бутоните.

Например, можем да напишем:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading...
</button>

Добавяме спинера така вътре в бутона и той ще се покаже.

Също така можем да направим същото с растящия спинер:

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading...
</button>

Заключение

Можем да добавим спинери, за да покажем напредъка на зареждането.

Внедрява се само с HTML и CSS, така че не се изисква JavaScript.