Lag Maskinvare Progress Bar enkelt med Mprogress.js
Det er ikke nektet at Googles materiell design har radikalt forandret nettet. Det tilbyr a felles design språk at brukergrensesnittdesignere kan søke på alle nettsteder og mobilapper.
Denne materielle designtrenden har ført til mange biblioteker, inkludert den populære materialiseringsrammen. Og en av kuleste nye materialprosjekter Jeg har funnet er Mprogress.js.
Dette JavaScript-biblioteket genererer en fremdriftslinje i materiell stil bruker rent CSS og JavaScript. Ingen avhengighet, ikke noe tull. Bare enkel lasting (og forhåndsbelastning) med et materialeutformingsutseende som passer til alle websider eller webapplikasjoner.
Oppsettet er ganske enkelt og krever bare to filer: et CSS og et JS-skript fra Mprogress.
Du kan last ned begge deler fra GitHub repo eller bruk en pakkebehandling slik som npm eller Bower. Derfra må du opprett et nytt Mprogress-objekt og fortelle det å starte lasteren.
Dette kan gjøres med bokstavelig talt en linje med kode:
var mprogress = ny Mprogress ('start'); Andre egenskaper kan brukes til å endre animasjonstidspunktet, hastigheten eller visningsfargen på fremdriftslinjen. Denne konfigurasjonen lar deg selv Lag egendefinerte maler basert på standard materiale design stil. Rått!
Ta en titt på demo side for å se denne lasteren i aksjon. Det er ikke en fortryllende lastestang, men det gir en fin løsning uten at du trenger å bygge en fra bunnen av.
Du kan kjøre metoder som sett() til sett en prosentandel eller inc () til øke lastestangen. Det kan håndteres programmatisk for å lage en HTTP-laster, men det krever ekstra arbeid i JavaScript.
Mprogress.js skjønnhet er dens enkelhet. Det forteller deg ikke hvordan du strukturerer data eller hva du trenger å laste. Det kan være å laste siden, eller det kan være å håndtere en filopplasting. Eller det kan spore hvor langt ned brukeren har rullet fra toppen av siden.
Det er så mye du kan gjøre med dette biblioteket og med null avhengigheter Du kan bruke den til et hvilket som helst webprosjekt. For å komme i gang, sjekk ut MProgress repo på GitHub hvor du også kan bla gjennom dokumentasjon.
