Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Кнопки отправки формы со встроенными индикаторами загрузки - Ladda
Дата добавления: 11.08.2019 - 13:10
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 990
Количество комментариев: 0
Размер файла: 20.3 Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Ladda - это библиотека загрузки JavaScript для создания кнопок со встроенными индикаторами загрузки (счетчик и панель загрузки). Требуется последняя библиотека spin.js.
Ladda объединяет индикаторы загрузки с действием, которое их вызвало.
1. Установите и импортируйте модули spin и ladda.
2. Подключите необходимый файл ladda.min.css в раздел head вашей веб-страницы.
3. Создайте кнопку с использованием атрибута html5 data- * для настройки стиля загрузки и цвета вашей кнопки.
4. Инициализируйте плагин на элементе кнопки.
5. Вы можете явно контролировать загрузку, используя JavaScript API, как описано ниже:
Ladda объединяет индикаторы загрузки с действием, которое их вызвало.
Как использовать:
1. Установите и импортируйте модули spin и ladda.
Код
# NPM
$ npm install spin.js ladda --save
$ npm install spin.js ladda --save
Код
import * as Ladda from 'ladda';
2. Подключите необходимый файл ladda.min.css в раздел head вашей веб-страницы.
Код
<!-- Полный -->
<link rel="stylesheet" href="dist/ladda.min.css">
<!-- Без визуальных стилей -->
<link rel="stylesheet" href="dist/ladda-themeless.min.css">
<link rel="stylesheet" href="dist/ladda.min.css">
<!-- Без визуальных стилей -->
<link rel="stylesheet" href="dist/ladda-themeless.min.css">
3. Создайте кнопку с использованием атрибута html5 data- * для настройки стиля загрузки и цвета вашей кнопки.
- data-color: green, red, blue, purple, или mint
- data-style: expand-left, expand-right, expand-up, expand-down, contract, contract-overlay, zoom-in, zoom-out, slide-left, slide-right, slide-up, или slide-down
- data-size: xs, s, l, или xl
- data-spinner-size: spinner размер
- data-spinner-color: spinner цвет
- data-spinner-lines: количество линий
Код
<button class="ladda-button"
data-color="purple"
data-style="expand-right">
<span class="ladda-label">Submit</span>
</button>
data-color="purple"
data-style="expand-right">
<span class="ladda-label">Submit</span>
</button>
4. Инициализируйте плагин на элементе кнопки.
Код
var instance = Ladda.create(document.querySelector('.laddaButton'));
5. Вы можете явно контролировать загрузку, используя JavaScript API, как описано ниже:
Код
// Начало загрузки
instance.start();
// Будет отображать индикатор выполнения для 60% ширины кнопки
instance.setProgress( 0.6 );
// Остановить загрузку
instance.stop();
// Переключение между состояниями loading/not loading
instance.toggle();
// Проверка текущего состояния
instance.isLoading();
// Удалить экземпляр ladda у кнопки
instance.remove();
// Остановить все
instance.stopAll();
// Вызвать анимацию загрузки по клику
Ladda.bind('button[type=submit]');
// Автоматически остановить через 3 секунды
Ladda.bind('button[type=submit]', {timeout: 3000});
instance.start();
// Будет отображать индикатор выполнения для 60% ширины кнопки
instance.setProgress( 0.6 );
// Остановить загрузку
instance.stop();
// Переключение между состояниями loading/not loading
instance.toggle();
// Проверка текущего состояния
instance.isLoading();
// Удалить экземпляр ladda у кнопки
instance.remove();
// Остановить все
instance.stopAll();
// Вызвать анимацию загрузки по клику
Ladda.bind('button[type=submit]');
// Автоматически остановить через 3 секунды
Ladda.bind('button[type=submit]', {timeout: 3000});
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: