Навигация Содержание
Главная / Bootstrap

Bootstrap 4 - Spinners (Спиннеры)

Bootstrap 4 - Spinners (Спиннеры)
20.6K
0
Содержание:
  1. Описание компонента Spinners
  2. Border spinner
  3. Growing spinner
  4. Настройка спиннеров
  5. Использование спиннера для анимации загрузки страницы
  6. Использование анимации загрузки при ajax-запросах
  7. Комментарии

В этой статье рассмотрим компонент Bootstrap 4, предназначенный для создания на сайте загрузочной анимации.

Описание компонента Spinners

Bootstrap Spinners – это компонент фреймворка Bootstrap 4, предназначенный для создания на веб-проектах загрузочной анимации, которая в основном используется для индикации на сайте не очень длительных по времени процессов (в среднем выполняющихся в пределах от 1 до 4 секунд). Например, для представления процесса загрузки всей страницы или некоторой её части.

Для индикации на сайте более продолжительных процессов лучше использовать полосы загрузки.

Спиннеры в Bootstrap построены только с использованием HTML и CSS (без JavaScript). Однако при их реальном применении на веб-проектах без JavaScript всё равно не обойтись. Его нужно будет использовать, например, когда нужно будет переключить видимость спиннера.

Кстати в Bootstrap 4 очень много вспомогательных (утилитных) классов, с помощью которых можно не только очень просто управлять видимостью спиннеров, а также выполнять ряд других действий над ними, например, выравнивать и изменять их размеры.

Поддержка вспомогательных технологий в компоненте Spinners обеспечивается с помощью атрибута role="status" и элемента <span class="sr-only">Загрузка...</span>.

Border spinner

Border spinner – это первый вид спиннера, который построен на основе CSS-свойства border и анимации вращения (функции rotate свойства transform).

Код border spinner:

HTML
<div class="spinner-border" role="status">
  <span class="sr-only">Загрузка...</span>
</div>

Border spinner использует ключевое слово currentColor для указания цвета в CSS-свойстве border. Это решение позволяет установить цвет спиннеру посредством утилитных классов Bootstrap 4, предназначенных для изменения цвета.

HTML
<!-- Класс text-primary используется для задания цвета спиннеру -->
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Загрузка...</span>
</div>

Почему для установления цвета не используются утилитные классы border-{color}? Всё дело в том, что данные классы устанавливают границы для всех четырёх сторон. А у border спиннеров одна граница (правая) имеет прозрачный цвет, и в случае его использования, он попросту её переопределит.

Growing spinner

Growing spinner – это второй вид спиннера, который построен на изменение прозрачности (opacity) и масштабировании (функции scale свойства transform).

Код growing spinner:

HTML
<div class="spinner-grow" role="status">
  <span class="sr-only">Загрузка...</span>
</div>

Growing spinner так же как и border spinner использует ключевое слово currentColor, но в этом спиннере оно используется для указания цвета фону. Благодаря этой особенности цвет growing спиннеру можно установить аналогичным образом.

HTML
<!-- Класс text-primary используется для задания цвета спиннеру -->
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Загрузка...</span>
</div>

Настройка спиннеров

Спиннеры в Bootstrap построены с использованием единицы измерения rem, ключевого слова currentColor и display: inline-block. А это означает, что их очень просто настраивать, а именно изменять размеры, цвет и выравнивание.

Например, для установления спиннеру отступов можно использовать классы из серии margin:

HTML
<div class="spinner-border m-3" role="status">
  <span class="sr-only">Загрузка...</span>
</div>

Выравнивание спиннера

Выровнять спиннер в Bootstrap 4 можно посредством:

  • утилитных классов flexbox;
  • float-классов;
  • классов для выравнивания текста.
HTML
<!-- Выравнивание спиннера по центру с помощью flexbox классов -->
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Загрузка...</span>
  </div>
</div>
<!-- Помещение спиннера справа от текста посредством flexbox классов -->
<div class="d-flex align-items-center">
  <strong>Загрузка...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
<!-- Размещение спиннера справа с помощью float класса -->
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Загрузка...</span>
  </div>
</div>
<!-- Задание местоположения спиннера посредством утилитного класса для выравнивания текста -->
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Загрузка...</span>
  </div>
</div>

Изменение размеров спиннера

B Bootstrap 4 имеются классы spinner-border-sm и spinner-grow-sm посредством которых можно уменьшить размеры спиннера. Это действие обычно применяется когда, например, спиннер необходимо поместить внутрь другого компонента.

HTML
<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>

Использование border spinners внутри кнопок:

HTML
<!-- Кнопка с border spinner -->
<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>
<!-- Кнопка, содержащая border spinner и текст "Загрузка..." -->
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Загрузка...
</button>

Использование growing spinners внутри кнопок:

HTML
<!-- Кнопка с growing spinner -->
<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>
<!-- Кнопка, контент которой состоит из growing spinner и текста "Загрузка..." -->
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Загрузка...
</button>

Осуществить изменение размеров спиннера на не стандартные можно с помощью CSS. Для этого их можно добавить в свой пользовательский CSS файл, подключенный к странице или в атрибут style.

HTML
<!-- Установим border spinner высоту и ширину, равную 4rem -->
<div class="spinner-border" style="width: 4rem; height: 4rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<!-- Установим growing spinner высоту и ширину, равную 4rem --> 
<div class="spinner-grow" style="width: 4rem; height: 4rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

Использование спиннера для анимации загрузки страницы

Для того чтобы использовать Bootstrap спиннер в качестве прелоадера достаточно выполнить следующие действия:

  1. Поместить html-код спиннера сразу после открывающего тега body, т.е. до основного контента страницы;
  2. Установить ему размеры и положение относительно центра страницы (с помощью CSS);
  3. Скрыть осовной контент страницы, т.е. добавить к основным блокам (контейнерам) класс d-none;
  4. Добавить на страницу скрипт, который будет после загрузки DOM скрывать спиннер и отображать основной контент страницы (т.е. добавить класс d-none к спиннеру и удалить его у основных блоков).
HTML
<body>

  <!-- Спиннер -->
  <div class="spinner-grow text-success" style="position: absolute; top: 50%; left: 50%; margin-top: -1.5rem; margin-left: -1.5rem; width: 3rem; height: 3rem;" role="status">
    <span class="sr-only">Loading...</span>
  </div>

  <!-- Контент страницы -->
  <header class="page-header d-none">
    <div class="container">
      HEADER
    </div>
  </header>
  <main class="page-main d-none">
    <div class="container">
      MAIN
    </div>
  </main>
  <footer class="page-footer d-none">
    <div class="container">
      FOOTER
    </div>
  </footer>

  <!-- jQuery -->
  <script src="/path/to/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="/path/to/bootstrap.bundle.js"></script>

  <script>
    // на "чистом" JavaScript
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('body > .spinner-grow').classList.add('d-none');
      document.querySelector('.page-header').classList.remove('d-none');
      document.querySelector('.page-main').classList.remove('d-none');
      document.querySelector('.page-footer').classList.remove('d-none'); 
    });
    // на jQuery
    /*
    $(function(){
      $('body > .spinner-grow').addClass('d-none');
      $('.page-header, .page-main, .page-footer').removeClass('d-none')l
    });
    */
  </script>

</body>

Использование анимации загрузки при ajax-запросах

Пример, в котором рассмотрим как применять спиннер для отображения процесса состоянии загрузки при выполнении ajax-запросов:

HTML
<div class="alert alert-danger">
  <div id="js-result"></div>
  <!-- Спиннер -->
  <button class="btn btn-primary" type="button" id="js-load">
    <span class="spinner-grow spinner-grow-sm d-none" role="status" aria-hidden="true"></span>
    Загрузить...
  </button>
</div>
...
<script>
  $('#js-load').click(function(){
    var _this = $(this);
    $.ajax({
      type:'GET',
      url: '/examples/custom/list.json',
      dataType: 'json',
      beforeSend: function () {
        // далем кнопку недоступной и отображаем спиннер 
        _this
          .prop('disabled', true)
          .find('.spinner-grow').removeClass('d-none');
      }
    })
      .done(function(data){
        // при успешном получении ответа
        var output = "";
        for (var i in data) {
          output += ($('<li>').text(data[i]))[0].outerHTML;
        }
        output = ($('<ul>').html(output))[0].outerHTML;
        $('#js-result').html(output);
      })
      .always(function(){
        // скрываем кнопку
        _this.addClass('d-none');
      });
  });
</script>

Комментарии: 0