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.

neueres Video älteres Video