Erstellen Sie Spinner und Loader mit einem Element mit CSSPIN

Sie können einige erstaunliche Dinge mit CSS3 erstellen benutzerdefinierte Eingabefelder zu Dropdowns und selbst Vektorgrafiken. Diese Techniken sind JavaScript schnell überholen, Dies erleichtert es Entwicklern, bessere Benutzererfahrungen zu erstellen.

Eines der schwierigsten Dinge zu bauen ist a Laden der Spinneranimation Aber moderne CSS-Animationen machen das sogar ziemlich einfach.

Um Zeit zu sparen, können Sie eine Bibliothek wie CSSPIN mit Tonnen von vordefinierte benutzerdefinierte Spinner. Alle diese Animationen können frei geklont werden und sind vollständig auf Open-Source-Basis voller Zugriff um den Code nach Belieben zu bearbeiten.

Das Einrichten eines Spinners mit dieser Bibliothek ist ein Kinderspiel. Sie gerade Kopieren Sie die CSS-Bibliothek dann in deine Seite Fügen Sie die benutzerdefinierten HTML-Elemente hinzu wo immer Sie möchten, dass sie erscheinen.

Diese benutzerdefinierten Spinner werden nur verwendet ein HTML-Element um den Animationseffekt zu erzeugen. Das ist enorm, weil die Grafik und der Animationseffekt sind nur durch CSS-Klassen gerendert.

Und da Sie Zugriff auf den Quellcode haben, können Sie Ersetzen Sie Formen, Farben, Größen und Animationsgeschwindigkeiten besser zu Ihren Projekten passen.

Notieren Sie sich einfach den Code verwendet LESS-Syntax, Daher müssen Sie mit dieser Vorverarbeitungssprache vertraut sein, um größere Änderungen vornehmen zu können.

Aber Sie können viel davon finden einfache CSS-Beispiele auf der Hauptdemoseite zusammen mit einfache anweisungen auf der GitHub-Seite.

Wenn Sie mit npm oder Laube diese sind alternative Methoden für die Installation der Bibliothek.

Unabhängig davon, wie Sie es installieren, ist dies eine großartige CSS-Animationsbibliothek, mit der Sie arbeiten können. Es bedeutet vollständig modular mit viel Platz für neue Spinner, neue Animationen und Anpassungen von anderen Entwicklern.

Um mehr zu erfahren und die gesamte Dokumentation durchzusehen, lesen Sie die CSSPIN-Repo auf GitHub. Der Schöpfer machte auch ein kleines Video einrichten dass du unten sehen kannst.