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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Рекомендуемое чтение: Материализация – CSS-дизайн материала.

Установка довольно проста и требует только два файла: CSS и JS-скрипт от Mprogress.
Вы можете скачать как с репозиторий GitHub или используйте менеджер пакетов, такой как npm или Bower. Оттуда вам нужно создать новый объект Mprogress и сказать ему запустить загрузчик.

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

var mprogress = new Mprogress (‘start’);

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

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

Вы можете запустить методы, такие как set (), чтобы установить процент или inc (), чтобы увеличить полосу загрузки. Это может быть обработано программно для создания загрузчика HTTP, но это требует дополнительной работы в JavaScript.
Прелесть Mprogress.js в простоте. Он не говорит вам, как структурировать данные или что вам нужно загружать. Это может быть загрузка страницы или загрузка файла. Или это может быть отслеживание того, как далеко пользователь прокрутил верхнюю часть страницы.

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

Рекомендуемое чтение: более 70 материалов по дизайну материалов для разработчиков Android