Skapa Material Design Progress Bar enkelt med Mprogress.js

Det finns ingen förnekande som Googles materialdesign har radikalt förändrat webben. Det erbjuder en gemensamt design språk som användargränssnittsdesigners kan tillämpa på alla webbplatser och mobilappar.

Denna materiella designutveckling har lett till många bibliotek, inklusive den populära materialiseringsramen. Och en av coolaste nya materialprojekt Jag har hittat är Mprogress.js.

Detta JavaScript-bibliotek genererar en materialstegs progress bar använder ren CSS och JavaScript. Inga beroenden, inget nonsens. Bara enkel laddning (och förladdning) med ett materialdesignsutseende som matchar alla webbplatser eller webbapplikationer.

Inställningen är ganska enkel och kräver bara två filer: ett CSS och ett JS-skript från Mprogress.

Du kan ladda ner båda från GitHub repo eller använd en pakethanterare såsom npm eller Bower. Därifrån behöver du skapa ett nytt Mprogress-objekt och berätta för att starta lastaren.

Detta kan göras med bokstavligen en rad kod:

 var mprogress = ny Mprogress ('start'); 

Övriga egenskaper kan användas för att ändra animationstid, hastighet eller visningsfärg på framdriftsfältet. Den här konfigurationen tillåter dig även skapa anpassade mallar baserad på standard materialdesign stil. Grymt bra!

Ta en titt på demo sida att se den här lastaren i åtgärd. Det är inte en fascinerande lastbar, men det erbjuder en bra lösning utan att du behöver bygga en från början.

Du kan köra metoder som uppsättning() till Ange en procentandel eller inc () till öka laddningsfältet. Det kan hanteras programmatiskt för att skapa en HTTP-laddare, men det kräver extra arbete i JavaScript.

Mprogress.js skönhet är dess enkelhet. Det berättar inte hur du strukturerar data eller vad du behöver ladda. Det kan vara att ladda sidan, eller det kan hantera en filuppladdning. Eller det kan spåra hur långt ner användaren har bläddrat från toppen av sidan.

Det finns så mycket du kan göra med detta bibliotek och med nollberoende du kan använda den för något webbprojekt. För att komma igång, kolla in MProgress repo på GitHub där du också kan bläddra igenom dokumentation.