Erstellen Sie mit ProgressBar.js benutzerdefinierte responsive Statusbalken
Fortschrittsbalken sind von den meisten Benutzern im Web allgemein bekannt. Für Entwickler ist dies oft ein komplizierter Prozess Erstellen Sie einen Fortschrittsbalken von Grund auf. Aber mit ProgressBar.js du musst nicht!
Diese kostenlose Open Source-Bibliothek hat keine Abhängigkeiten und unterstützt alle gängigen Browser, einschließlich IE9+.
Standardmäßig können Sie Verwenden Sie eine einfache Bar, oder du kannst Wählen Sie aus einigen Grundformen, sowie:
- Einzelne Zeile
- Halbkreis
- Voller Kreis
- Quadrat
- Dreieck
Sie können auch entwerfen Ihre eigenen Formen B. ein Herz, eine Wolke oder sogar die Beschriftung des Logos Ihrer Website. Zugegeben, dies erfordert einige Anstrengungen, aber das Endergebnis kann unglaublich sein.
Die Bibliothek arbeitet auf SVG-Pfaden, also wenn du kannst eine umrissene Form bauen Mit SVG-Markup können Sie animiere es mit dieser Fortschrittsbalkenbibliothek.
Animationen können auch Text einschließen oder haben benutzerdefinierte Start- / Stoppmuster. Die volle API hat weitere Details mit Optionen / Rückrufen dass Sie nach Belieben durchsehen können.
ProgressBar.js hat auch eine kleine Installationsanleitung wo Du kannst Laden Sie das Skript herunter und richten Sie es ein mit Bower, npm oder der vereinfachten GitHub-Seite.
Und wenn Sie etwas Cooles bauen, können Sie Senden Sie Ihren Code in das GitHub-Repo. Der Schöpfer des Projekts, Kimmo Brunfeldt, hat eine GitHub-Problem öffnen wo Du kannst benutzerdefinierte Designs einreichen in die Bibliothek aufgenommen werden.
Sie können animierte Fortschrittsbalken hinzufügen um Seiten zu registrieren, Felder hochzuladen oder als Preloader auf eine beliebige Webseite zu laden. Die Optionen sind nur durch begrenzt wie detailliert du bist bereit zu bekommen.
Zum Beispiel mag ich die Demo für die Passwortstärkemessung seitdem dient einem echten Zweck und Vorteile für die Benutzererfahrung. Dieses Beispiel kommt mit dem Plugin verpackt, Sie können dies kopieren und nach Ihren Wünschen ändern.
Sehen mehr Beispiele, Schauen Sie sich die ProgressBar.js-Homepage an oder werfen Sie einen Blick auf diese Geige, die die Herzanimation demonstriert.
