25 inspirierende Ladeanimationen (CSS und JavaScript)

25 inspirierende Ladeanimationen (CSS und JavaScript) Thumbnail
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!

Anzeige

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

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

#2 Square in a circle – Loading Animation

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

#3 Rainbow Loader

Anzeige

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

#4 CSS Text filling with water

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

#5 Single Element CSS-Only Absolute Center Overlay Spinner

Autor: MattIn4D;
Programmiert in: HTML, CSS;

#6 Material Design Spinner

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

#7 Loading

Anzeige

Autor: dissimulate;
Programmiert in: HTML, CSS;

#8 Cog loading animation

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

#9 Cube loading animation

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

#10 CSS loading animation 12

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

#11 Loading Animation

Anzeige

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

#12 Pacman loading animation in one div

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

#13 Loading Animation CSS

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

#14 CSS Dash Loader

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

#15 Compose loading animation

Anzeige

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

#16 CSS Loading Animation

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

#17 Only CSS Loader – Wizard

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

#18 Random geometric shapes loading animation

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

#19 Canvas loading animation

Anzeige

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

#20 XBox SmartGlass Loading Animation

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

#21 Loading Animation MySensors

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

#22 CSS Pancake Loader

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

#23 Loading Animation

Anzeige

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

#24 Rotate / Pulse Loading Animation

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

#25 CSS Loading Animation

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!

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

Ähnliche Beiträge
💬 Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.