Luo materiaalin suunnittelun etenemispalkki helposti Mprogress.js n avulla
Google ei ole kiistänyt materiaalin suunnittelu on radikaalisti muuttanut verkkoa. Se tarjoaa a yhteinen suunnittelukieli että UI-suunnittelijat voivat soveltaa kaikkia verkkosivustoja ja mobiilisovelluksia.
Tämä materiaalisuunnittelu on johtanut moniin kirjastoihin, mukaan lukien suosittu materiaali-kehys. Ja yksi tyylikkäimmät uudet materiaaliprojektit Olen löytänyt Mprogress.js.
Tämä JavaScript-kirjasto luo a materiaalityylinen etenemispalkki käyttämällä puhdasta CSS: ää ja JavaScriptiä. Ei riippuvuuksia, ei hölynpölyä. Vain yksinkertainen lastaus (ja esikuormitus), jolla on materiaali, joka sopii mihin tahansa verkkosivustoon tai web-sovellukseen.
Asennus on melko yksinkertainen ja vaatii vain kaksi tiedostoa: CSS ja JS-skripti Mprogressilta.
Sinä pystyt lataa molemmat GitHub-reposta tai käytä pakettien hallintaa kuten npm tai Bower. Sieltä sinun täytyy luo uusi Mprogress-objekti ja kerro se käynnistää kuormaaja.
Tämä voidaan tehdä kirjaimellisesti yksi rivi koodia:
var mprogress = uusi Mprogress ('alku'); Muut ominaisuudet voidaan käyttää muuttamaan etenemispalkin animaation ajoitusta, nopeutta tai näytön väriä. Tämä kokoonpano mahdollistaa jopa luoda mukautettuja malleja perustuu oletusarvoiseen materiaalin muotoiluun. Mahtava!
Ota kurkistus demo-sivu nähdä tämä kuormaaja toiminnassa. Se ei ole lumoava lastauspalkki, mutta se tarjoaa mukavan ratkaisun ilman, että sinun tarvitsee rakentaa sitä tyhjästä.
Voit suorittaa sellaisia menetelmiä sarja() että määritä prosenttiosuus tai inc () että kasvattaa lastauspalkkia. Se voidaan käsitellä ohjelmallisesti HTTP-kuormaimen luomiseen, mutta se vaatii ylimääräistä työtä JavaScriptissä.
Mprogress.js: n kauneus on sen yksinkertaisuus. Se ei kerro, miten jäsentää tietoja tai mitä tarvitset lataamiseen. Se voi olla sivun lataaminen, tai se voi käsitellä tiedoston lataamista. Tai se voi seurata, kuinka paljon alaspäin käyttäjä on vierittänyt sivun yläreunasta.
Voit tehdä tämän kirjaston kanssa niin paljon ja nolla riippuvuudet voit käyttää sitä missä tahansa web-projektissa. Aloita aloittamalla MProgress repo GitHubissa, jossa voit myös selata dokumentointi.
