Создать встроенный эффект загрузки в кнопках с LADDA

Существуют различные виды анимации, которые вы можете применить на своей веб-странице. Анимация для текста, модальное окно, переход и индикатор прогресса. Для индикаторов прогресса, обычно в форме столбцов, прогресс, который вы видите на панели, показывает, какой прогресс был достигнут (или загружен). Однако, если вас интересует прогресс внутри кнопки, попробуйте Ladda,

Ladda это плагин JQuery, созданный Хаким Эль Хаттаб чтобы дать вам эффект загрузки внутри кнопки. Это концепция пользовательского интерфейса, которая эффективно разделяет разрыв между действием и обратной связью. Пользователям будет предоставлена обратная связь в виде индикатора загрузки вместо того, чтобы покидать страницу. Существует также версия Ладда для WordPress доступный.

Основное использование

Ladda можно использовать как отдельный плагин, который не нуждается в каких-либо других зависимостях. Для начала, вы должны включить файлы ladda.min.js и spin.min.js, которые вы можете получить из Страница GitHub в вашем проекте, вот так.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Чтобы кнопка применяла темы Ladda по умолчанию, загрузите CSS-файл ladda.min.css. Если вам нужны только функциональные кнопки без темы, загрузите файл ladda-themeless.min.css.

HTML-разметка

Чтобы заставить Ladda работать, вы должны включить в кнопку класс ladda-button. Вот пример:

Ladda также предоставляет вам опции в HTML, используя атрибуты данных для стиля кнопки. Как вы можете видеть выше, кнопка использует стиль данных для стиля анимации. Чтобы применить другой стиль, вы можете проверить полный список в демонстрационная страница,

Чтобы изменить цвет, вы можете использовать data-color. Для размера кнопки включите в нее размер данных.

Слияние с сервером

И теперь, чтобы сделать загрузочную анимацию отправленной на сервер (который перезагрузит страницу после анимации), нам понадобится метод bind (). Это свяжет кнопки прогресса и симулирует процесс загрузки:

Вы также можете управлять своими кнопками, используя Javascript API, используя следующий подход:

Вывод

Благодаря поддержке Bootstrap и отзывчивости, Ladda стоит попробовать в вашем проекте. Более того, он был протестирован и хорошо работает в последних версиях Chrome, Firefox, Safari, а также IE9 и выше. Не стесняйтесь, дайте нам знать, что вы думаете в поле для комментариев ниже.