Opret Material Design Progress Bar nemt med Mprogress.js
Der er ingen benægtelse af Googles materiale design har radikalt ændret internettet. Det tilbyder a fælles designsprog at brugergrænsefladeteknikere kan anvende på alle hjemmesider og mobilapps.
Denne materielle designtrin har ført til mange biblioteker, herunder den populære materialiseringsramme. Og en af cooleste nye materialeprojekter Jeg har fundet er Mprogress.js.
Dette JavaScript-bibliotek genererer en materialestil progress bar bruger ren CSS og JavaScript. Ingen afhængigheder, intet nonsens. Bare simpel indlæsning (og preloading) med et materiale design look, der matcher enhver hjemmeside eller webapplikation.
Opsætningen er ret simpel og kræver kun to filer: et CSS og et JS script fra Mprogress.
Du kan download begge dele fra GitHub repo eller brug en pakke manager såsom npm eller Bower. Derfra skal du opret et nyt Mprogress-objekt og fortæl det om at starte lasteren.
Dette kan gøres med bogstaveligt en linje med kode:
var mprogress = ny Mprogress ('start'); Andre egenskaber kan anvendes til at ændre animations timing, hastighed eller visningsfarve på fremdriftslinjen. Denne konfiguration tillader dig selv Opret brugerdefinerede skabeloner baseret på standard materiale design stil. fantastisk!
Tag et kig på demo side at se denne loader i aktion. Det er ikke en fascinerende indlæsningsbjælke, men det giver en god løsning uden at du behøver at bygge en fra bunden.
Du kan køre metoder som sæt() til Indstil en procentdel eller inc () til øge indlæsningslinjen. Det kan håndteres programmatisk for at oprette en HTTP-loader, men det kræver ekstra arbejde i JavaScript.
Skønheden i Mprogress.js er dens enkelhed. Det fortæller dig ikke, hvordan du strukturerer data eller hvad du skal indlæse. Det kunne være at indlæse siden, eller det kunne være at håndtere en filopload. Eller det kan spore, hvor langt ned brugeren har rullet fra toppen af siden.
Der er så meget, du kan gøre med dette bibliotek og med nul afhængigheder Du kan bruge det til ethvert web-projekt. For at komme i gang, tjek den MProgress repo på GitHub hvor du også kan gennemse dokumentation.
