Руководство Bootstrap Spinner

Bootstrap Spinner
Spinner и Color
Размер Spinner
Spinner в Button
Placement

1. Bootstrap Spinner

Вы можете использовать Bootstrap Spinner, чтобы отобразить статус скачивания (loading state) приложения, или любой другой процесс. Bootstrap Spinner построен только с HTML и CSS поэтому вам не понадобится Javascript для его создания, но возможно вам понадобится немного Javascript для управления его скрытия или отображения.

Самый простой способ создания Spinner:

<!-- Spinner -->

<div class="spinner-border"></div>

Создайте Spinner подходящий устройству Screen Reader:

Spinner

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

role = "status"	Оповещает устройтсву Screen Reader что это элемент описывающий процесс (статус) работы.
<span class="sr-only"> Loading... </span>	Это скрытый элемент в обычных устройствах, но он может быть найдет устройством Screen Reader.

Виды Spinner у Bootstrap:

.spinner-border / .spinner-grow

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

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

Смотрите полный пример:

spinners-example.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Spinner Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

<body>
    <div class="container">
        <h4 class="mb-4 mt-2">spinner-border</h4>

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


        <h4 class="mb-4 mt-2">.spinner-grow</h4>

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

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
</body>
</html>

2. Spinner и Color

Используйте утилитарные классы Text Color вы можете установить цвета для Spinner.

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50

.spinner-border

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

.spinner-grow

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

3. Размер Spinner

Добавьте класс .spinner-border-sm или .spinner-grow-sm в Spinner помогая его немного уменьшить, это нужно если вы хотите поставить ваш Spinner в определенный component, например Button.

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

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

Добавьте класс .spinner-border-lg или .spinner-grow-lg в Spinner если вы хотите получить Spinner побольше.

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

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

Вы так же можете кастомизировать размер Spinner через CSS:

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

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

4. Spinner в Button

Поставить Spinner внутри Button или определенного компонента (component).

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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="sr-only">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>

5. Placement

Используйте несколько утилитарных классов в Bootsrap для настройки позиции для Spinner:

spinner-placement-example.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Spinner Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <style>
        .my-box {
            height: 50px;
            padding: 5px;
            margin: 10px 0 5px 0;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="container-fluid">

        <h4>Flex</h4>
        <div class="my-box d-flex justify-content-center">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <div class="my-box d-flex align-items-center">
            <span>Loading...</span>
            <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
        </div>

        <h4>Float</h4>
        <div class="my-box">
            <div class="spinner-border float-right" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>

        <h4>Text Align</h4>
        <div class="my-box text-center">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

Смотрите так же:
Руководство Bootstrap Text Utility
Bootstrap Float
Học Bootstrap Typography