Stvorite materijal za napredak u dizajnu materijala Jednostavno s Mprogress.js
Nema sumnje da je Google dizajn materijala je radikalno promijenio web. Nudi a zajednički jezik dizajna koje dizajneri korisničkog sučelja mogu primijeniti na sve web-lokacije i mobilne aplikacije.
Ovaj trend oblikovanja materijala doveo je do mnogih knjižnica, uključujući i popularni okvir Materialise. I jedan od najzgodniji novi materijalni projekti Našao sam Mprogress.js.
Ova JavaScript knjižnica generira traka napretka u stilu materijala koristeći čisti CSS i JavaScript. Nema ovisnosti, nema gluposti. Jednostavno učitavanje (i predopterećenje) izgledom dizajna materijala koji će odgovarati svakom web mjestu ili web aplikaciji.
Postavljanje je prilično jednostavno i zahtijeva samo dvije datoteke: CSS i JS skripta iz Mprogressa.
Možeš preuzmite oboje od GitHub repo ili koristite upravitelja paketa kao što je npm ili Bower. Odatle morate stvorite novi objekt Mprogressa i recite mu da pokrene utovarivač.
To se može učiniti doslovno jedan redak koda:
var mprogress = novi Mprogress ('start'); Ostala svojstva može se primijeniti za promjenu vremena animacije, brzine ili boje prikaza trake napretka. Ta vam konfiguracija čak omogućuje izradite prilagođene predloške na temelju zadanog stila dizajna materijala. Super!
Zavirite u demo stranicu da biste vidjeli ovaj punjač u akciji. To nije očaravajuća traka za učitavanje, no nudi lijepo rješenje bez potrebe za izgradnjom jednog od nule.
Možete pokrenuti slične metode set () do postavite postotak ili Inc. () do povećajte traku za učitavanje. Može se programski obraditi kako bi se stvorio HTTP punjač, ali to zahtijeva dodatni rad u JavaScriptu.
Ljepota Mprogress.js je njegova jednostavnost. Ne govori vam kako strukturirati podatke ili što trebate učitati. Moglo bi biti učitavanje stranice, ili bi moglo biti rukovanje učitavanjem datoteke. Ili može pratiti koliko je daleko korisnik pomaknuo s vrha stranice.
Toliko toga možete učiniti s ovom knjižnicom i sa nula ovisnosti možete ga koristiti za bilo koji web-projekt. Da biste započeli, provjerite MProgress repo na GitHubu gdje također možete pregledavati dokumentacija.
