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.

GitHub Audio verwendet Aktivität auf GitHub, um beruhigende Musik zu erzeugen

GitHub Audio verwendet Aktivität auf GitHub, um beruhigende Musik zu erzeugen

Für diejenigen unter euch, die es hassen, in der Stille zu arbeiten, ist GitHub Audio die perfekte Hintergrundwebseite, die man behalten kann. Created by Sudhanshu Mishra, GitHub Audio ist ein Projekt, das GitHub-Aktivitäten in Form von Musiktönen verfolgt.Diese zufälligen Noten kommen vom Xylophon, den Saiteninstrumenten und manchmal tief rumpelnden Orchesterstücken - und sie werden ausgelöst, indem neuer Code zu einem GitHub-Repository hinzugefügt wird oder wenn ein Problem auf der Site geöffnet oder geschlossen wird.Das Erg

(Tech- und Design-Tipps)

Chrome 55 Update verspricht Speichererweiterung

Chrome 55 Update verspricht Speichererweiterung

Bei allen Accounts ist Google Chrome ein ziemlich guter Browser. Leider wurde Chrome seit dem ersten Start durch Speicherverwaltungsprobleme beeinträchtigt . Das wird sich mit dem kommenden Chrome 55-Update ändern, mit dem die JavaScript-Engine des Browsers verbessert werden soll, was zu einer Verbesserung der Browser-Leistung führt. D

(Tech- und Design-Tipps)