Създайте лента за напредък в материалния дизайн лесно с Mprogress.js

Няма съмнение, че Google дизайн на материала е променила радикално мрежата. Той предлага a общ език за дизайн които дизайнерите на потребителски интерфейс могат да прилагат за всички уебсайтове и мобилни приложения.

Тази тенденция в дизайна на материалите е довела до много библиотеки, включително популярната рамка на материализирането. И един от най-готините нови материални проекти Открих, че е Mprogress.js.

Тази JavaScript библиотека генерира a лента за напредък в материалния стил използване на чист CSS и JavaScript. Няма зависимости, без глупости. Просто натоварване (и предварително зареждане) с материален дизайн, който ще съвпадне с всеки уеб сайт или уеб приложение.

Настройката е доста проста и изисква само два файла: CSS и JS скрипт от Mprogress.

Можеш изтеглете и двете от репо GitHub или използвайте мениджър на пакети като npm или Bower. От там трябва създайте нов обект Mprogress и му кажете да стартира товарача.

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

 var mprogress = нов Mprogress ('start'); 

Други свойства може да се приложи за промяна на времето, скоростта или цвета на дисплея на лентата за напредък. Тази конфигурация дори ви позволява създаване на персонализирани шаблони въз основа на стандартния стил на дизайн на материала. страхотен!

Погледни демо страница за да видите това зареждане в действие. Това не е хипнотизиращо натоварване, но предлага добро решение, без да се налага да изградиш едно от нулата.

Можете да изпълнявате подобни методи комплект() да се задайте процент или Inc () да се увеличаване на лентата за зареждане. Тя може да се обработва програмно, за да се създаде HTTP товарач, но това изисква допълнителна работа в JavaScript.

Красотата на Mprogress.js е неговата простота. Той не ви казва как да структурирате данни или какво трябва да се зарежда. Възможно е да се зарежда страницата или да се извършва качване на файл. Или пък може да проследява колко далеч надолу потребителят е прелиствал от горната част на страницата.

Има толкова много неща, които можете да направите с тази библиотека и с нея нулеви зависимости можете да го използвате за всеки уеб проект. За да започнете, разгледайте MProgress репо в GitHub, където можете също да разглеждате документация.