Erstellen Sie einen Fortschrittsbalken für das Materialdesign mit Mprogress.js

Es ist nicht zu leugnen, dass Google Material Design hat das Web radikal verändert. Es bietet a gemeinsame Designsprache UI-Designer können sich auf alle Websites und mobilen Apps anwenden.

Dieser Materialdesign-Trend hat zu vielen Bibliotheken geführt, darunter auch zum beliebten Materialise-Framework. Und einer der coolste neue Materialprojekte Ich habe es gefunden Mprogress.js.

Diese JavaScript-Bibliothek generiert eine Fortschrittsbalken im Materialstil mit reinem CSS und JavaScript. Keine Abhängigkeiten, kein Quatsch Einfaches Laden (und Laden) mit einem Materialdesign-Look, der zu jeder Website oder Webanwendung passt.

Das Setup ist ziemlich einfach und Benötigt nur zwei Dateien: ein CSS und ein JS-Skript von Mprogress.

Sie können Laden Sie beide herunter aus dem GitHub Repo oder Verwenden Sie einen Paketmanager wie npm oder Bower. Von dort müssen Sie Erstellen Sie ein neues Mprogress-Objekt und sagen Sie es, um den Lader zu starten.

Dies kann buchstäblich mit getan werden eine Codezeile:

 var mprogress = new Mprogress ('start'); 

Andere Eigenschaften kann angewendet werden, um das Timing der Animation, die Geschwindigkeit oder die Anzeigefarbe der Fortschrittsleiste zu ändern. Diese Konfiguration lässt Sie sogar zu Erstellen Sie benutzerdefinierte Vorlagen basierend auf dem Standardmaterialdesignstil. Genial!

Werfen Sie einen Blick auf die Demo-Seite um diesen Lader in Aktion zu sehen. Es ist keine faszinierende Ladeleiste, bietet jedoch eine gute Lösung, ohne dass Sie eine komplett neu bauen müssen.

Sie können Methoden wie ausführen einstellen() zu einen Prozentsatz einstellen oder inc () zu erhöhen Sie die Ladebalken. Es kann programmgesteuert gehandhabt werden, um einen HTTP-Loader zu erstellen, dies erfordert jedoch zusätzliche Arbeit in JavaScript.

Die Schönheit von Mprogress.js ist seine Einfachheit. Es sagt Ihnen nicht, wie Sie Daten strukturieren oder was Sie laden müssen. Möglicherweise wird die Seite geladen, oder es wird ein Dateiupload durchgeführt. Oder Sie können verfolgen, wie weit der Benutzer vom oberen Rand der Seite gescrollt ist.

Mit dieser Bibliothek und mit können Sie so viel tun keine Abhängigkeiten Sie können es für jedes Webprojekt verwenden. Um zu beginnen, überprüfen Sie die MProgress-Repo auf GitHub, wo Sie auch durchsehen können Dokumentation.