Сегодня мы поговорим о кнопках с индикатором загрузки для Bootstrap. Для этого мы будем использовать небольшой плагин, а именно Ladda Bootstrap — это библиотека javascript, которая была создана после вдохновения Ladda.js, который помогает вам создавать встроенные индикаторы загрузки (счетчик, панель загрузки и т. д.). В первую очередь данная библиотека предназначена для работы с формами, где формы и кнопки требуют уведомления пользователя о том, что загрузка происходит медленно и отображение загрузочного индикатора.

 

Если вы хотите затрать минимум усилий, тогда попробуйте найти что-то бесплатное и не только от наших партнеров, здесь есть материалы на любой вкус:

Шаг 1. HTML

Нам необходимо подключить Bootstrap CSS для вашей странице, это очень важно, так как без него не будет работать ваши кнопки:

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

Разметка кнопок у нас стандартная, единственное, для каждой кнопки вам нужно указать желаемый класс, который мы покажем ниже.

Шаг 2. СSS

Cоздаем кнопку с индикатором загрузки с нужным нам стилем. Используем атрибут html5 data-* для добавления желаемого нам стиля:

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

Просмотрев демку вы можете увидеть достаточно простые, но информативные кнопки для сайта с использованием Bootstrap и Ladda Bootstrap.

Вот и все. Готово!