Erstellen Sie benutzerdefinierte Responsive Fortschrittsbalken mit ProgressBar.js

Fortschrittsbalken sind den meisten Benutzern im Internet bekannt. Für Entwickler ist es oft ein komplizierter Prozess , einen Fortschrittsbalken von Grund auf neu zu erstellen . Aber mit ProgressBar.js müssen Sie nicht!

Diese freie Open-Source-Bibliothek hat keine Abhängigkeiten und unterstützt alle gängigen Browser, einschließlich IE9 +.

Standardmäßig können Sie eine einfache Leiste verwenden, oder Sie können aus einigen wenigen Grundformen auswählen, z.

• Einzelne Zeile
• Halbkreis
• Voller Kreis
• Platz
• Dreieck

Sie können auch Ihre eigenen benutzerdefinierten Formen wie ein Herz, eine Wolke oder sogar die Beschriftung des Logos Ihrer Website entwerfen. Zugegeben, das wird einige Anstrengungen erfordern, aber das Endergebnis kann unglaublich sein.

Die Bibliothek arbeitet mit SVG-Pfaden . Wenn Sie also eine umrissene Form mit SVG-Markup erstellen können , können Sie sie mit dieser Fortschrittsbalkenbibliothek animieren .

Animationen können auch Text enthalten oder benutzerdefinierte Start / Stopp-Muster haben . Die vollständige API enthält mehr Details mit Optionen / Rückrufen, die Sie in Ihrer Freizeit lesen können.

ProgressBar.js hat auch eine kleine Installationsanleitung, in der Sie das Skript mit Bower, npm oder der vereinfachten GitHub-Seite herunterladen und einrichten können .

Und wenn Sie etwas cooles bauen, können Sie Ihren Code in das GitHub Repo einreichen . Der Ersteller des Projekts, Kimmo Brunfeldt, hat ein offenes GitHub-Problem, bei dem Sie benutzerdefinierte Designs einreichen können , die in die Bibliothek aufgenommen werden sollen.

Sie können animierte Fortschrittsbalken zum Registrieren von Seiten, zum Hochladen von Feldern oder zu jeder Webseite als Preloader hinzufügen . Die Optionen sind nur begrenzt, wie detailliert Sie bereit sind.

Ich mag zum Beispiel die Demonstration des Passwortstärkemessgeräts, da sie einen echten Zweck erfüllt und der Benutzerfreundlichkeit zugute kommt . Dieses Beispiel ist im Lieferumfang des Plugins enthalten, sodass Sie es kopieren und nach Ihren Wünschen modifizieren können.

Um mehr Beispiele zu sehen, schau dir die ProgressBar.js Homepage an oder sieh dir diese Geige an, um die Herzanimation zu demonstrieren.