betacode

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

  1. Bootstrap Spinner
  2. Spinner и Color
  3. Размер Spinner
  4. Spinner в Button
  5. 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 Float
  • Học Bootstrap Typography

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

Show More