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


Erstellen Sie einen integrierten Ladeeffekt in Schaltflächen mit LADDA

Es gibt verschiedene Arten von Animationen, die Sie auf Ihre Webseite anwenden können. Animation für Text, modale Box, Übergang und die Fortschrittsanzeige. Für Fortschrittsanzeigen, normalerweise in Form von Balken, zeigt der Fortschritt, den Sie in der Leiste sehen, an, wie viel Fortschritt gemacht (oder geladen) wurde. Wenn Sie jedoch daran interessiert sind, innerhalb einer Schaltfläche Fortschritte zu machen, probieren Sie Ladda aus.

Ladda ist ein jQuery-Plugin, das von Hakim El Hattab erstellt wurde, um Ihnen den Ladeeffekt innerhalb eines Buttons zu geben . Es ist ein UI-Konzept, das effektiv die Lücke zwischen Aktion und Feedback trennt. Die Benutzer erhalten eine Rückmeldung in Form einer Ladeanzeige, anstatt die Seite verlassen zu müssen. Es gibt auch eine Version von Ladda für WordPress.

Grundlegende Verwendung

Ladda kann als eigenständiges Plugin verwendet werden, das keine weiteren Abhängigkeiten benötigt. Um zu beginnen, müssen Sie zuerst sowohl die Dateien ladda.min.js und spin.min.js hinzufügen, die Sie von der GitHub-Seite in Ihrem Projekt erhalten.

Um die Schaltfläche zum Laden der Standard-Ladda-Themen zu verwenden, lade die CSS-Datei von ladda.min.css . Wenn Sie nur die Funktionsschaltflächen ohne das Thema möchten, laden Sie die Datei ladda-themeless.min.css .

HTML-Markup

Um Ladda zum ladda-button zu bringen, musst du die ladda-button Klasse in den Button aufnehmen. Hier ist ein Beispiel:

  

Ladda bietet Ihnen auch Optionen innerhalb des HTML mit Datenattributen für den Button-Stil. Wie Sie oben sehen können, verwendet die Schaltfläche Datenstil für den Animationsstil. Um einen anderen Stil anzuwenden, können Sie die vollständige Liste auf der Demoseite überprüfen.

Um die Farbe zu ändern, können Sie Datenfarbe verwenden. Geben Sie für die Schaltflächengröße die data-size für die Schaltfläche an.

Zusammenführung mit dem Server

Und jetzt, um die Lade-Animation zum Server zu schicken (was die Seite nach der Animation neu lädt), benötigen wir die bind() Methode. Dadurch werden Fortschrittsbuttons gebunden und Ladevorgänge simuliert:

Sie können Ihre Schaltflächen auch mithilfe der Javascript-API mit folgendem Ansatz steuern:

Fazit

Mit der Unterstützung von Bootstrap und der Reaktionsfähigkeit ist Ladda einen Versuch in Ihrem Projekt wert. Darüber hinaus wurde es getestet und es funktioniert gut in der neuesten Version von Chrome, Firefox, Safari sowie IE9 und höher. Zögern Sie nicht, uns Ihre Meinung in das Kommentarfeld zu schreiben.

Berühmte Internet-Premieren: Damals und jetzt [Infografik]

Berühmte Internet-Premieren: Damals und jetzt [Infografik]

Das Internet ist schon eine Weile da, es ist etwas bizzarisch zu denken, dass es eine Art Geschichte haben könnte. Wussten Sie, dass das erste Buch, das bei Amazon gekauft wurde, 1995 passiert ist ? Und bis heute wird noch viel mehr gekauft. Für diejenigen von uns, die neugierig auf den Rest des Internets sind, hat das Team von WebpageFX diese praktische Infografik zusammengestellt.D

(Tech- und Design-Tipps)

10 Zeichen Sie sind zu weit in Freelance Design gegangen

10 Zeichen Sie sind zu weit in Freelance Design gegangen

Freiberufliches Design ist großartig, aber niemand, den ich kenne, ist so geblieben, wie er oder sie vorher war, nach Jahren einer (oft traumatischen) freiberuflichen Erfahrung. Nach einer Weile würden wir gerne denken, dass wir uns Stück für Stück zu etwas jenseits des Menschen entwickelt haben, entweder mit übernatürlichen Fähigkeiten oder mit geistig störenden Eigenschaften, und das möchte ich heute in diesem Beitrag teilen: die 10 Gewohnheiten, die du entwickelst wenn du zu weit in freiberufliches Design fällst .Laufe durc

(Tech- und Design-Tipps)