Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Кнопки отправки формы со встроенными индикаторами загрузки - Ladda
Дата добавления: 11.08.2019 - 13:10
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 20
Количество комментариев: 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});
Поделись с друзьями:
