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:

 einreichen 

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.

So lösen Sie die Festplatte konnte nicht partitioniert werden Fehler beim Boot Camp-Assistenten [Quicktip]

Fehlermeldung " Ihre Festplatte konnte nicht partitioniert werden " beim Versuch, Windows mit dem Boot Camp-Assistenten auf Ihrem Mac zu installieren? Wenn Sie versuchen, es manuell mit dem Festplatten-Dienstprogramm zu partitionieren, wird möglicherweise eine ähnliche Fehlermeldung angezeigt.D

(Tech- und Design-Tipps)

Wie man ein Spiel von Grund auf ohne Codierung erstellt

Es war einmal so, dass die einzigen Leute, die Spiele gespielt haben, diejenigen sind, die teure Handheld-Geräte wie den GameBoy oder Konsolen, die ihnen von ihren Eltern geschenkt werden, haben. Fast jeder, der einen Laptop, einen Desktop, ein Smartphone oder ein Tablet besitzt - vom 5-Jährigen bis zur Oma - spielt Spiele.D

(Tech- und Design-Tipps)