Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

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


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