Форма входа

Бесплатный раздел

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

Кнопки отправки формы со встроенными индикаторами загрузки - Ladda

Дата добавления: 11.08.2019 - 13:10
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 20
Количество комментариев: 0
Размер файла: 20.3 Kb
Рейтинг материала: 5.0 / 1
Кнопки отправки формы со встроенными индикаторами загрузки - Ladda
рейтинг 5.0
/
голосов 1
Ladda - это библиотека загрузки JavaScript для создания кнопок со встроенными индикаторами загрузки (счетчик и панель загрузки). Требуется последняя библиотека spin.js.

Ladda объединяет индикаторы загрузки с действием, которое их вызвало.



Как использовать:


1. Установите и импортируйте модули spin и ladda.
Код
# NPM
$ 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">


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>


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});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: