Maak voortgangsbalk voor materiaalontwerp eenvoudig met Mprogress.js

Het valt niet te ontkennen dat Google's materiaal ontwerp heeft het web radicaal veranderd. Het biedt een gemeenschappelijke ontwerptaal dat UI-ontwerpers van toepassing kunnen zijn op alle websites en mobiele apps.

Deze materiële ontwerptrend heeft geleid tot vele bibliotheken, waaronder het populaire Materialise-raamwerk. En een van de coolste nieuwe materiële projecten Ik heb ontdekt dat het is Mprogress.js.

Deze JavaScript-bibliotheek genereert een voortgangsbalk in materiaalstijl met pure CSS en JavaScript. Geen afhankelijkheden, geen onzin. Eenvoudig laden (en vooraf laden) met een materiaalontwerp dat bij elke website of webtoepassing past.

De opzet is vrij eenvoudig en vereist slechts twee bestanden: een CSS en een JS-script van Mprogress.

Jij kan download beide van de GitHub repo of gebruik een pakketbeheerder zoals npm of Bower. Vanaf daar moet je maak een nieuw Mprogress-object aan en vertel het om de lader te starten.

Dit kan letterlijk worden gedaan een regel code:

 var mprogress = new Mprogress ('start'); 

Andere eigenschappen kan worden toegepast om de animatietiming, snelheid of weergavekleur van de voortgangsbalk te wijzigen. Met deze configuratie kun je zelfs maak aangepaste sjablonen gebaseerd op de standaard materiaalontwerpstijl. Geweldig!

Neem een ​​kijkje op de demopagina om deze lader in actie te zien. Het is geen betoverende laadbalk, maar het biedt wel een mooie oplossing zonder dat je er een vanaf nul hoeft te bouwen.

U kunt methoden zoals uitvoeren set () naar stel een percentage in of inc () naar verhoog de laadbalk. Het kan programmatisch worden afgehandeld om een ​​HTTP-lader te maken, maar dat vereist extra werk in JavaScript.

De schoonheid van Mprogress.js is zijn eenvoud. Het vertelt u niet hoe u gegevens moet structureren of wat u moet laden. Het zou de pagina kunnen laden, of het zou een bestandsupload kunnen zijn. Of het kan volgen hoe diep de gebruiker van de bovenkant van de pagina is geschoven.

Er is zoveel dat je kunt doen met deze bibliotheek en met nul afhankelijkheden je kunt het gebruiken voor elk webproject. Bekijk de. Om aan de slag te gaan MProgress repo op GitHub waar je ook door kunt bladeren documentatie.