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

В этой статье рассмотрим компонент 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:
<div class="spinner-border" role="status">
<span class="sr-only">Загрузка...</span>
</div>
Border spinner использует ключевое слово currentColor для указания цвета в CSS-свойстве border. Это решение позволяет установить цвет спиннеру посредством утилитных классов Bootstrap 4, предназначенных для изменения цвета.
<!-- Класс 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:
<div class="spinner-grow" role="status">
<span class="sr-only">Загрузка...</span>
</div>
Growing spinner так же как и border spinner использует ключевое слово currentColor, но в этом спиннере оно используется для указания цвета фону. Благодаря этой особенности цвет growing спиннеру можно установить аналогичным образом.
<!-- Класс text-primary используется для задания цвета спиннеру -->
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Загрузка...</span>
</div>
Настройка спиннеров
Спиннеры в Bootstrap построены с использованием единицы измерения rem, ключевого слова currentColor и display: inline-block. А это означает, что их очень просто настраивать, а именно изменять размеры, цвет и выравнивание.
Например, для установления спиннеру отступов можно использовать классы из серии margin:
<div class="spinner-border m-3" role="status">
<span class="sr-only">Загрузка...</span>
</div>
Выравнивание спиннера
Выровнять спиннер в Bootstrap 4 можно посредством:
- утилитных классов flexbox;
- float-классов;
- классов для выравнивания текста.
<!-- Выравнивание спиннера по центру с помощью 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
посредством которых можно уменьшить размеры спиннера. Это действие обычно применяется когда, например, спиннер необходимо поместить внутрь другого компонента.
<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 внутри кнопок:
<!-- Кнопка с 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 внутри кнопок:
<!-- Кнопка с 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.
<!-- Установим 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 спиннер в качестве прелоадера достаточно выполнить следующие действия:
- Поместить html-код спиннера сразу после открывающего тега
body
, т.е. до основного контента страницы; - Установить ему размеры и положение относительно центра страницы (с помощью CSS);
- Скрыть осовной контент страницы, т.е. добавить к основным блокам (контейнерам) класс
d-none
; - Добавить на страницу скрипт, который будет после загрузки DOM скрывать спиннер и отображать основной контент страницы (т.е. добавить класс
d-none
к спиннеру и удалить его у основных блоков).
<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-запросов:
<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>