de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

Film Noir: 30 dunkle und kalte digitale Kunstwerke

Film Noir: 30 dunkle und kalte digitale Kunstwerke

Film Noir ist eine der am leichtesten zu erkennenden Filmarten, die weithin bekannt ist für ihre Schwarz-Weiß-Visuals, ihre Verwendung von Schatten und Silhouetten, die hartgesottenen Charaktere, die Anti-Helden und ihre täuschenden Hauptdarstellerinnen.Gewürzt mit den üblichen Gewaltszenen, Waffen, Alkohol und vielen Zigaretten, ist der Film Noir auch eine der stilvollsten Formen des Kinos der Welt. Lei

(Tech- und Design-Tipps)

So testen Sie Websites synchron über mehrere Browser und Geräte hinweg

So testen Sie Websites synchron über mehrere Browser und Geräte hinweg

Responsive Web Design (RWD) ist heute ein gängiger Ansatz beim Aufbau einer mobilen Website. Der Aufbau einer responsiven Website kann jedoch ziemlich irritierend sein, wenn Sie die Website in mehreren Geräten und auf verschiedenen Bildschirmgrößen testen müssen.Angenommen, Sie haben drei Geräte, auf denen der Test ausgeführt werden kann. Mögli

(Tech- und Design-Tipps)