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.
10 nützliche Bildwerkzeuge, die jeder Social Marketer benötigt
Wenn Sie viel mit Social Media arbeiten, müssen Sie wissen, dass jede Plattform unterschiedliche Dimensionen für die hochgeladenen Fotos benötigt. Diese Abmessungen stellen sicher, dass Sie das am besten geeignete Foto für diese Position oder Ihren Standort erstellen können, sei es ein Facebook-Titelbild oder ein Titelbild für Google Plus, eine Twitter-Kopfzeile oder mehr.Dies
5 Dinge, die Sie tun können, wenn jemand Ihre Idee stiehlt
Der Diebstahl von Ideen passiert die ganze Zeit in der Kreativbranche. Wenn Sie sich etwas Neues und Aufregendes einfallen lassen, das Aufmerksamkeit erregt, ist es unvermeidlich, dass Sie irgendwann von anderen gerissen werden, die auf den Schultern Ihres Erfolges reiten wollen. Und ja, es ist scheiße.