Створити бару матеріалу прогрес бар легко з Mprogress.js

Не можна заперечувати, що Google дизайн матеріалу радикально змінив павутину. Він пропонує a спільна мова дизайну дизайнери інтерфейсу можуть застосовуватися до всіх веб-сайтів і мобільних додатків.

Ця тенденція до створення матеріалу призвела до того, що багато бібліотек, у тому числі популярні рамки Materialize. І один з найкрутіші нові матеріальні проекти Я знайшов Mprogress.js.

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

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

Ти можеш завантажити обидва від репо GitHub або використовувати менеджер пакетів наприклад, npm або Bower. Звідти вам потрібно створити новий об'єкт Mprogress і скажіть, щоб він запустив завантажувач.

Це можна зробити буквально один рядок коду:

 var mprogress = new Mprogress ('start'); 

Інші властивості можна застосувати для зміни часу анімації, швидкості або кольору відображення індикатора виконання. Ця конфігурація навіть дозволяє створювати власні шаблони на основі стилю дизайну матеріалу за замовчуванням. Високий!

Подивіться на Демонстраційна сторінка щоб побачити цей завантажувач у дії. Це не зачаровує бар завантаження, однак він пропонує хороше рішення без вас, щоб побудувати один з нуля.

Ви можете запускати такі способи встановити () до встановити відсоток або inc () до збільшити рядок завантаження. Його можна обробляти програмно, щоб створити завантажувач HTTP, але це вимагає додаткової роботи в JavaScript.

Краса Mprogress.js є його простота. Він не повідомляє вам про те, як структурувати дані або що потрібно завантажувати. Це може бути завантаження сторінки, або вона може обробляти завантаження файлу. Або він може відстежувати, як далеко прокручується користувач у верхній частині сторінки.

З цією бібліотекою та з нею можна так багато зробити нульові залежності Ви можете використовувати його для будь-якого веб-проекту. Щоб почати, перевірте MProgress репо на GitHub, де ви також можете переглядати документації.