Легко создавайте индикатор выполнения дизайна материала с помощью Mprogress.js

Там нет никаких сомнений, что Google дизайн материала радикально изменил сеть. Он предлагает общий язык дизайна которые дизайнеры пользовательского интерфейса могут применять ко всем веб-сайтам и мобильным приложениям.

Эта тенденция дизайна материалов привела ко многим библиотекам, включая популярную среду Materialise. И один из самые крутые новые материальные проекты Я нашел это Mprogress.js.

Эта библиотека JavaScript генерирует индикатор выполнения в стиле материала используя чистый CSS и JavaScript. Нет зависимостей, нонсенс Простая загрузка (и предварительная загрузка) с дизайном материала, который подойдет для любого веб-сайта или веб-приложения.

Установка довольно проста и требуется только два файла: CSS и JS-скрипт от Mprogress.

Вы можете скачать оба из репозитория GitHub или используйте менеджер пакетов такие как нпм или бауэр. Оттуда вам нужно создать новый объект Mprogress и скажи это запустить загрузчик.

Это можно сделать буквально одна строка кода:

 var mprogress = new Mprogress ('start'); 

Другие свойства может применяться для изменения времени анимации, скорости или цвета отображения индикатора выполнения. Эта конфигурация даже позволяет вам создавать собственные шаблоны на основе стиля оформления материала по умолчанию. Потрясающие!

Взгляните на демонстрационная страница чтобы увидеть этот погрузчик в действии. Это не завораживающая панель загрузки, однако она предлагает хорошее решение без необходимости создавать его с нуля..

Вы можете запустить такие методы, как задавать() в установить процент или же вкл () в увеличить полосу загрузки. Это может быть обработано программно для создания загрузчика HTTP, но это требует дополнительной работы в JavaScript.

Прелесть Mprogress.js в том, его простота. Он не говорит вам, как структурировать данные или что вам нужно загружать. Это может быть загрузка страницы или загрузка файла. Или это может быть отслеживание того, как далеко пользователь прокрутил верх страницы.

С этой библиотекой и с нулевые зависимости Вы можете использовать его для любого веб-проекта. Чтобы начать, проверьте MProgress РЕПО на GitHub, где вы также можете просматривать документация.