Как создать спиннер в Bootstrap

iconНа чтение9 мин
iconОпубликовано
iconОбновлено

Спиннеры – это небольшие анимированные графические элементы, которые можно использовать для отображения загрузки или ожидания. Они являются популярным элементом веб-дизайна и могут сделать пользовательский опыт более интерактивным и приятным. Если вы хотите внедрить спиннеры в свой веб-сайт, то с помощью Bootstrap это можно сделать очень легко.

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

Для начала вам понадобится загрузить и подключить последнюю версию Bootstrap к вашему веб-сайту. Вы можете это сделать, добавив соответствующее подключение к CSS-файлу Bootstrap и подключение к JavaScript-файлу JQuery перед закрывающим тегом </head> в вашем HTML-коде. После этого вы можете приступить к созданию спиннера.

Что такое спиннер и как его создать в Bootstrap

В Bootstrap существует несколько способов создания спиннера. Один из них – использование класса .spinner-border или .spinner-grow в сочетании с классом .text-primary или другим цветовым классом для изменения цвета спиннера.

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

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

Чтобы добавить цветовую акцентуацию, можно использовать следующий код:

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

Альтернативно, можно использовать альтернативный стиль спиннера:

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

Добавление управляющего элемента, такого как кнопка, и применение класса .disabled к нему, позволяет создать спиннер, который отключается при нажатии кнопки:

<button type="button" class="btn btn-primary" disabled>Сохранение...</button>

Также можно изменить размер спиннера с помощью класса .spinner-border-sm или .spinner-border-lg. Например:

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

Примечание: Убедитесь, что вы подключили необходимые стили Bootstrap перед добавлением спиннера на страницу.

Шаг 1: Установка Bootstrap

На странице загрузки вы можете выбрать два варианта установки: скачать ZIP-архив или использовать CDN (Content Delivery Network). Если вы предпочитаете работать с локальными файлами, рекомендуется скачать и распаковать ZIP-архив.

Если же вы предпочитаете использовать CDN, скопируйте ссылку на CSS-файл Bootstrap и добавьте его в раздел <head> вашего HTML-документа:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

Кроме того, добавьте ссылку на JavaScript-файл Bootstrap перед закрывающимся тегом <body>:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

После установки Bootstrap вы готовы приступить к созданию спиннера.

Шаг 2: Создание HTML-разметки

Для создания спиннера в Bootstrap нам необходимо создать некоторую HTML-разметку. Начнем с создания основного контейнера для спиннера.

Сначала мы создадим таблицу с одной строкой и одной колонкой. Для этого воспользуемся тегом <table> и его содержимым. Затем создадим строку и ячейку с классом .spinner-container для стилизации спиннера.

Код HTML-разметки для спиннера в Bootstrap:

<table><tr><td class="spinner-container"></td></tr></table>

Далее мы можем продолжить с созданием элементов спиннера внутри контейнера. Например, мы можем создать круглый элемент, который будет визуализировать вращение.

Чтобы создать круглый элемент, мы можем использовать тег <div> с классом .spinner. Далее мы можем использовать классы .spinner-border и .text-primary для добавления стилей к элементу.

Код HTML-разметки для создания элемента спиннера:

<table><tr><td class="spinner-container"><div class="spinner spinner-border text-primary"></div></td></tr></table>

Теперь у нас есть основная HTML-разметка для создания спиннера в Bootstrap. Мы можем продолжить с настройкой стилей, добавления анимации и других дополнительных свойств для получения желаемого внешнего вида спиннера.

Шаг 3: Подключение стилей спиннера

Чтобы спиннер выглядел и работал правильно, необходимо подключить стили, предоставляемые Bootstrap. Для этого нужно добавить ссылку на файл стилей в разделе head вашего HTML-документа:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Этот файл стилей содержит все необходимые классы, которые позволят вам создать спиннер и настроить его внешний вид. После подключения стилей, вы сможете использовать классы Bootstrap для добавления спиннеров на вашу страницу.

Теперь, когда вы подключили файл стилей, вы можете переходить к следующему шагу и создавать спиннер с помощью Bootstrap.

Шаг 4: Настройка внешнего вида спиннера

Чтобы настроить внешний вид спиннера в Bootstrap, можно использовать классы, предоставляемые фреймворком.

1. Сначала определите контейнер, в котором будет размещаться спиннер. Для этого создайте элемент с классом spinner-container.

2. Далее определите сам спиннер. В Bootstrap есть несколько вариантов:

  1. Спиннер типа «border». Для этого создайте элемент с классом spinner-border. Можно задать дополнительные классы для определения размера и цвета. Например, spinner-border-sm для небольшого спиннера или spinner-border-primary для спиннера с основным цветом фреймворка.
  2. Спиннер типа «grow». Для этого создайте элемент с классом spinner-grow. Также можно задать дополнительные классы для размера и цвета.

3. Разместите спиннер в контейнере, добавив его внутрь элемента с классом spinner-container.

4. Если нужно, можно добавить дополнительные стили, например, для изменения цвета или размера спиннера.

Вот пример кода, который создает спиннер типа «border» с размером «sm» и цветом «primary»:

<div class="spinner-container"><div class="spinner-border spinner-border-sm spinner-border-primary"></div></div>

После этого спиннер будет отображаться согласно заданным настройкам внешнего вида.

Шаг 5: Написание JavaScript-кода для спиннера

Для создания спиннера в Bootstrap мы должны добавить некоторый JavaScript-код, который будет управлять его поведением. Вот пример простого JavaScript-кода, который позволяет создать спиннер и управлять его анимацией:

  1. Создайте новый файл с именем «spinner.js» и откройте его в редакторе кода.
  2. Добавьте следующий код в файл «spinner.js»:
var spinner = {show: function() {$('.spinner').addClass('show');},hide: function() {$('.spinner').removeClass('show');}};
  1. Сохраните файл «spinner.js».

В данном коде мы создаем объект «spinner», который имеет два метода: «show» и «hide». Метод «show» добавляет класс «show» к элементу с классом «spinner», что делает его видимым и автоматически запускает анимацию спиннера. Метод «hide» удаляет класс «show» из элемента с классом «spinner», что прекращает анимацию и делает спиннер невидимым.

Теперь, чтобы показать спиннер в момент загрузки контента или выполнения асинхронных операций, достаточно вызвать метод «show» объекта «spinner», а после окончания операции вызвать метод «hide». Например:

// Показать спиннерspinner.show();// Выполнение асинхронной операцииsetTimeout(function() {// Завершение операции// Скрыть спиннерspinner.hide();}, 3000);

Таким образом, мы создали спиннер в Bootstrap и написали JavaScript-код для его управления. Теперь вы можете использовать этот спиннер в своих проектах для показа загрузки или выполнения асинхронных операций.

Шаг 6: Включение спиннера на страницу

Чтобы включить спиннер на страницу, вам понадобится добавить несколько элементов кода:

1. Создайте тег <div> с классом «spinner».

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

2. Внутри тега <div class="spinner"> создайте еще один тег <div> с классом «rect1».

<div class="spinner"><div class="rect1"></div></div>

3. Повторите шаг 2 еще пять раз, изменяя класс каждого тега <div> на «rect2», «rect3», «rect4», «rect5» и «rect6».

<div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div><div class="rect6"></div></div>

4. Внутри тега <div class="spinner"> добавьте еще один тег <div> с классом «rect7».

<div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div><div class="rect6"></div><div class="rect7"></div></div>

5. Включите стили спиннера, добавив следующий код в раздел <style> или подключить файл стилей:

.spinner {margin: 100px auto;width: 50px;height: 40px;text-align: center;font-size: 10px;}.rect1, .rect2, .rect3, .rect4, .rect5, .rect6, .rect7 {background-color: #333;height: 100%;width: 6px;display: inline-block;margin-right: 1px;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;}.rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}.rect3 {-webkit-animation-delay: -1s;animation-delay: -1s;}.rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}.rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}.rect6 {-webkit-animation-delay: -0.7s;animation-delay: -0.7s;}.rect7 {-webkit-animation-delay: -0.6s;animation-delay: -0.6s;}@-webkit-keyframes stretchdelay {0%, 40%, 100% { -webkit-transform: scaleY(0.4) }20% { -webkit-transform: scaleY(1) }}@keyframes stretchdelay {0%, 40%, 100% {transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}  20% {transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}
HTMLCSS
.spinner {

margin: 100px auto;

width: 50px;

height: 40px;

text-align: center;

font-size: 10px;

}

.rect1, .rect2, .rect3, .rect4, .rect5, .rect6, .rect7 {

background-color: #333;

height: 100%;

width: 6px;

display: inline-block;

margin-right: 1px;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.rect3 {

-webkit-animation-delay: -1s;

animation-delay: -1s;

}

.rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.rect6 {

-webkit-animation-delay: -0.7s;

animation-delay: -0.7s;

}

.rect7 {

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

}

Шаг 7: Проверка работы спиннера

После завершения настройки спиннера, вы можете проверить его работу в браузере. Для этого откройте HTML-файл с вашим кодом спиннера в любом современном веб-браузере.

Если ваш спиннер работает корректно, вы должны увидеть анимированный кружок, который вращается вокруг своего центра. Это значит, что вы успешно создали спиннер с помощью Bootstrap.

Если ваш спиннер не работает, убедитесь, что вы правильно подключили CSS и JS файлы Bootstrap. Вы также можете проверить код спиннера на предмет опечаток или других ошибок, которые могут привести к некорректной работе.

Если после проверки все еще возникают проблемы, вы можете обратиться к документации Bootstrap, где описаны подробные инструкции по настройке и использованию спиннеров.

Поздравляем! Теперь у вас есть рабочий спиннер, который можно использовать на вашем веб-сайте или веб-приложении.

Добавить комментарий

Вам также может понравиться