Vytvorte ľahko s nástrojom Mprogress.js

Neexistuje žiadne popretie, že Google materiálový dizajn radikálne zmenil web. Ponúka a spoločný dizajnový jazyk že dizajnéri používateľského rozhrania sa môžu vzťahovať na všetky webové stránky a mobilné aplikácie.

Tento materiálový trend viedol k mnohým knižniciam vrátane populárneho rámca Materialize. A jedna z nich najlepšie nové projekty materiálov Zistil som, že je Mprogress.js.

Táto knižnica JavaScript generuje materiálový štýl priebehu pomocou čistého CSS a JavaScript. Žiadne závislosti, žiadny nezmysel. Jednoduché načítanie (a predinštalovanie) s dizajnom materiálu, ktorý sa zhoduje s akoukoľvek webovou stránkou alebo webovou aplikáciou.

Nastavenie je veľmi jednoduché a vyžaduje iba dva súbory: CSS a JS skript od spoločnosti Mprogress.

Môžeš stiahnuť oboje z repo GitHub alebo použite správcu balíkov napríklad npm alebo Bower. Odtiaľ budete musieť vytvorte nový objekt Mprogress a povedzte mu, aby spustil nakladač.

To sa dá dosiahnuť doslova jeden riadok kódu:

 var mprogress = nový Mprogress ("štart"); 

Ďalšie vlastnosti môžete použiť na zmenu časovania animácie, rýchlosti alebo farby zobrazenia pruhu postupu. Táto konfigurácia vás dokonca umožní vytvárať vlastné šablóny založené na štandardnom štýle dizajnu materiálu. Úžasné!

Pozrite sa na demo stránka vidieť tento nakladač v akcii. Nie je to fascinujúci nakladací panel, ale ponúka pekné riešenie, bez toho, aby ste museli stavať jeden od nuly.

Môžete spúšťať metódy, ako je set () na nastavte percento alebo INC () na zvýšiť nakladaciu lištu. To môže byť spracované programovo vytvoriť nakladač HTTP, ale to vyžaduje extra prácu v jazyku JavaScript.

Krása Mprogress.js je jeho jednoduchosť. Nehovorí vám, ako štruktúrovať údaje alebo čo musíte načítať. Mohlo by to byť načítanie stránky, alebo by to mohlo byť zaobchádzanie s nahrávaním súborov. Alebo by bolo možné sledovať, ako ďaleko sa používateľ posúval z hornej časti stránky.

Existuje toľko, čo môžete robiť s touto knižnicou as nulových závislostí môžete ho použiť na akýkoľvek webový projekt. Ak chcete začať, pozrite si stránku MProgress repo na GitHub, kde môžete tiež prechádzať dokumentácia.