25 inspirierende Ladeanimationen (CSS und JavaScript)

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
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
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
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
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
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
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
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.