Animiertes Lade-Icon (Preloader) erstellen – Webdesign-Tutorial
Sind auf einer Website sehr viele Inhalte (z. B. Bilder oder Videos) vorhanden, so kann dies die Ladezeit stark erhöhen. Ein animiertes Lade-Icon – oft als Preloader bezeichnet – schafft Abhilfe: Damit der Besucher keine halbfertige Seite präsentiert bekommt, kann man dieses vorschalten.
Dadurch hat man zunächst eine ansprechende, vollflächige Animation und nachdem im Hintergrund alle Inhalte komplett vorhanden sind, wird diese smooth ausgeblendet.
Dafür benötigt man nur einen HTML-Tag, paar Zeilen CSS sowie eine kleine jQuery-Funktion. Damit auch bei deaktiviertem JavaScript alles fehlerfrei funktioniert, muss man noch eine kleine Ergänzung integrieren. Die Schritte zum Erstellen eines Spinners, Loaders bzw. Loading Icons zeige ich in diesem Webdesign-Tutorial.
Dieses Video ist auf Deutsch. I speak german in this tutorial.
* Dies ist ein Affiliate-Link, der mit dem Partnerprogramm von Amazon zusammenhängt. Sobald du darauf geklickt hast, wird bei dir am Rechner für 24 Stunden ein Cookie gespeichert. Wenn du in diesem Zeitraum etwas bei Amazon kaufst, dann bekomme ich dafür eine kleine Provision (zwischen einem und zehn Prozent des Warenkorb-Wertes). Auf dich oder deinen Einkauf hat dies keine Auswirkungen. Vielen Dank für deine Unterstützung! 😊