Anyagtervezési előrehaladási sáv létrehozása könnyen a Mprogress.js-al

Nem tagadható, hogy a Google anyagtervezés radikálisan megváltoztatta az internetet. Kínál a közös tervezési nyelv hogy az UI-tervezők minden webhelyre és mobilalkalmazásra vonatkozhatnak.

Ez az anyagtervezési trend számos könyvtárhoz vezetett, köztük a népszerű materializáló keretrendszert is. És az egyik legmenőbb új anyagi projektek Találtam Mprogress.js.

Ez a JavaScript-könyvtár a anyag-stílus haladási sáv tiszta CSS és JavaScript használatával. Nincs függőség, nem értelmetlen. Csak egyszerű betöltése (és előfeszítése) olyan anyagtervezéssel, amely megfelel bármely webhely vagy webes alkalmazásnak.

A beállítás elég egyszerű, és csak két fájlt igényel: egy CSS és egy JS script az Mprogress-től.

tudsz töltse le mindkettőt a GitHub repóból vagy használjon csomagkezelőt például npm vagy Bower. Innen meg kell hozzon létre egy új Mprogress objektumot és mondja el, hogy indítsa el a rakodót.

Ez szó szerint történhet egy kódsor:

 var mprogress = új Mprogress ('start'); 

Egyéb tulajdonságok alkalmazható az előrehaladási sáv animációs időzítésének, sebességének vagy megjelenítési színének megváltoztatásához. Ez a konfiguráció még akkor is lehetővé teszi egyedi sablonok létrehozása alapértelmezett anyagtervezési stílus alapján. Fantasztikus!

Keress egy pillantást a demóoldal látni ezt a rakodót. Ez nem bámulatos betöltő bár, de szép megoldást kínál, anélkül, hogy meg kellene építenie a semmiből.

Futtathat olyan módszereket, mint a készlet() nak nek állítson be egy százalékot vagy inc () nak nek növelje a betöltési sávot. Programozhatóan kezelhető HTTP-betöltő létrehozásához, de ez extra munkát igényel a JavaScript-ben.

A Mprogress.js szépsége annak egyszerűsége. Nem mondja el, hogyan kell strukturálni az adatokat vagy mit kell betöltenie. Lehet, hogy betölti az oldalt, vagy lehet egy fájl feltöltése. Vagy nyomon követhető, hogy a felhasználó mennyire lefelé görgetett az oldal tetejéről.

Annyit tehetsz ezzel a könyvtárral és nulla függőségek bármely webes projekthez használhatja. Az induláshoz nézze meg a MProgress repo a GitHub-on, ahol a böngészőn keresztül is böngészhet dokumentáció.