Руководство 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

Pуководства Bootstrap

Возможно, вам интересно

Это онлайн курс вне вебсайта betacode.net, который мы представляем, он включает бесплатные курсы или курсы со скидкой.

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

1. Bootstrap Spinner

2. Spinner и Color

3. Размер Spinner

4. Spinner в Button

5. Placement

Pуководства Bootstrap

Pуководства Bootstrap

Новейшие статьи