25 inspirierende Ladeanimationen (CSS und JavaScript)

Veröffentlicht am 30. Oktober 2020Zuletzt aktualisiert am 17. April 2021

Zur Überbrückung von Wartezeiten auf Websites und in Webanwendungen ist der Einsatz von Ladeanimationen bestens geeignet. Hier findest Du eine Auswahl der kreativsten und inspirierensten Ladeanimationen!

Da man die Funktionalität und das Erscheinungsbild von Animationen durch JavaScript deutlich verbessern kann, kommen einige mit JavaScript daher.

Wenn Dir eine Ladeanimation gefällt, kannst Du einfach Copy&Paste machen. 🙂 (Licensing)

#1 Dump Truck Loading Animation

See the Pen Dump Truck Loading Animation by Jon Kantner (@jkantner) on CodePen.

Autor: Jon Kantner;
Programmiert in: HTML, CSS (SCSS), JS;

#2 Square in a circle – Loading Animation

See the Pen Square in a circle – Loading Animation by Ray (@raymondyang) on CodePen.

Autor: Ray;
Programmiert in: HTML, CSS (SCSS);

#3 Rainbow Loader

See the Pen Rainbow Loader by Jack Rugile (@jackrugile) on CodePen.

Autor: Jack Rugile;
Programmiert in: HTML, CSS;

#4 CSS Text filling with water

See the Pen CSS Text filling with water by Lucas Bebber (@lbebber) on CodePen.

Autor: Lucas Bebber;
Programmiert in: HTML, CSS (SCSS);

#5 Single Element CSS-Only Absolute Center Overlay Spinner

See the Pen Single Element CSS-Only Absolute Center Overlay Spinner by MattIn4D (@MattIn4D) on CodePen.

Autor: MattIn4D;
Programmiert in: HTML, CSS;

#6 Material Design Spinner

See the Pen Material Design Spinner by Fran Pérez (@mrrocks) on CodePen.

Autor: Fran Pérez;
Programmiert in: HTML, CSS (SCSS);

#7 Loading

See the Pen Loading by dissimulate (@dissimulate) on CodePen.

Autor: dissimulate;
Programmiert in: HTML, CSS;

#8 Cog loading animation

See the Pen Cog loading animation by Jamie Coulter (@jcoulterdesign) on CodePen.

Autor: Jamie Coulter;
Programmiert in: HTML (Haml), CSS (SCSS);

#9 Cube loading animation

See the Pen Cube loading animation by Paul Grant (@cssinate) on CodePen.

Autor: Paul Grant;
Programmiert in: HTML, CSS (SCSS);

#10 CSS loading animation 12

See the Pen CSS loading animation 12 by Martin van Driel (@martinvd) on CodePen.

Autor: Martin van Driel;
Programmiert in: HTML, CSS;

#11 Loading Animation

See the Pen Loading Animation by loic (@loic_album) on CodePen.

Autor: Ioic;
Programmiert in: HTML, CSS (SCSS);

#12 Pacman loading animation in one div

See the Pen Pacman loading animation in one div by Iddar Olivares (@iddar) on CodePen.

Autor: Iddar Olivares;
Programmiert in: HTML, CSS (Less);

#13 Loading Animation CSS

See the Pen Loading Animation CSS by Tatsuya Azegami (@42EG4M1) on CodePen.

Autor: Tatsuya Azegami;
Programmiert in: HTML, CSS (SCSS);

#14 CSS Dash Loader

See the Pen CSS Dash Loader by Cassidy Williams (@cassidoo) on CodePen.

Autor: Cassidy Williams;
Programmiert in: HTML, CSS;

#15 Compose loading animation

See the Pen Compose loading animation by Brandon Mathis (@imathis) on CodePen.

Autor: Brandon Mathis;
Programmiert in: HTML, CSS (SCSS);

#16 CSS Loading Animation

See the Pen CSS Loading Animation by John Urbank (@jurbank) on CodePen.

Autor: John Urbank;
Programmiert in: HTML (Haml), CSS (Sass);

#17 Only CSS Loader – Wizard

See the Pen Only CSS Loader – Wizard by Guilmain Dorian (@Craaftx) on CodePen.

Autor: Guilmain Dorian;
Programmiert in: HTML (Pug), CSS (SCSS);

#18 Random geometric shapes loading animation

See the Pen Random geometric shapes loading animation by Tony Banik (@banik) on CodePen.

Autor: Tony Banik;
Programmiert in: HTML (Slim), CSS (SCSS), JS;

#19 Canvas loading animation

See the Pen Canvas loading animation by Rachel Smith (@rachsmith) on CodePen.

Autor: Rachel Smith;
Programmiert in: HTML, CSS (SCSS), JS;

#20 XBox SmartGlass Loading Animation

See the Pen XBox SmartGlass Loading Animation by Adam Argyle (@argyleink) on CodePen.

Autor: Adam Argyle;
Programmiert in: HTML (Pug), CSS (Stylus);

#21 Loading Animation MySensors

See the Pen Loading Animation MySensors by Edoardo (@edoardoo) on CodePen.

Autor: Edoardo;
Programmiert in: HTML, CSS (SCSS);

#22 CSS Pancake Loader

See the Pen CSS Pancake Loader by Dario Corsi (@dariocorsi) on CodePen.

Autor: Dario Corsi;
Programmiert in: HTML, CSS (SCSS);

#23 Loading Animation

See the Pen Loading Animation by John Heiner (@johnheiner) on CodePen.

Autor: John Heiner;
Programmiert in: HTML, CSS (SCSS);

#24 Rotate / Pulse Loading Animation

See the Pen Rotate / Pulse Loading Animation by Colin Horn (@colinhorn) on CodePen.

Autor: Colin Horn;
Programmiert in: HTML, CSS (SCSS), JS;

#25 CSS Loading Animation

See the Pen CSS Loading Animation by Glen Cheney (@Vestride) on CodePen.

Autor: Glen Cheney;
Programmiert in: HTML (Haml), CSS (SCSS), JS;

Fazit

Welche Ladeanimation hat Dir am besten gefallen? Wenn Du auch eine Ladeanimation auf Codepen veröffentlicht hast, lass es mich gerne wissen, damit ich diese Liste erweitern kann! ?

Noch nicht genug? Dann könnte das etwas für Dich sein!

• Coole CSS Buttons
• Kreative 404-Error Seiten
• Top CSS Navigation Menus
• Satisfying CSS Animationen

Hinweis: Alle Ladeanimationen sind alle auf codepen.io veröffentlicht und nicht von mir.