60 inspirierende Ladeanimationen (CSS & JavaScript)

CSS Ladeanimationen sind eine effektive Möglichkeit, um Wartezeiten auf Websites und in Webanwendungen zu überbrücken. Wenn du auf der Suche nach kreativen und inspirierenden CSS Spinnern bist, bist du hier genau richtig. Entdecke meine Auswahl der besten CSS Ladeanimationen!
Manchmal dauert es eben ein paar Sekunden bis eine komplexe Webseite oder Anwendung geladen ist. Damit dein Besucher weiß, dass etwas passiert, solltest du unbedingt eine Ladeanimation einbauen – das ist auch ganz einfach, wie ich dir am Ende des Beitrags anhand eines kurzen Videos demonstrieren werde.
Wenn Dir eine Ladeanimation gefällt, kannst Du einfach Copy&Paste machen 🙂
Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.
#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;
#26 Authentic Weather Loader
Autor: Tim Holman;
Programmiert in: HTML, CSS (SCSS);
#27 Loading Animation with Morphing SVG
Autor: Heather Buchel;
Programmiert in: HTML, CSS (SCSS);
#28 CSS open store animation
Autor: Mariana Beldi;
Programmiert in: HTML, CSS;
#29 CSS Loading Animation
Autor: Ahmad Emran;
Programmiert in: HTML, CSS;
#30 Cat Loader
Autor: Claudia;
Programmiert in: HTML, CSS (SCSS), JS (TweenMax.js);
#31 Button Loading Animation
Autor: Joshua Ward;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);
#32 Floating Loading Animation
Autor: Mario Duarte;
Programmiert in: HTML, CSS (SCSS);
#33 Organic Button
Autor: Rik Schennink;
Programmiert in: HTML, CSS (SCSS), JS;
#34 Switch loading animation
Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);
#35 Download progress animation
Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (GSAP);
#36 CSS3 Loading animations
Autor: Manoz;
Programmiert in: HTML, CSS;
#37 CSS3 Loader & Spinners
Autor: Vineeth.TR;
Programmiert in: HTML (Pug), CSS (SCSS);
#38 Download Button Animation
Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (GSAP);
#39 Cat loader
Autor: Rplus;
Programmiert in: HTML (Pug), CSS (SCSS);
#40 Loading
Autor: Vladislav Trefil;
Programmiert in: HTML (Pug), CSS (Sass), JS (jQuery);
#41 Glitch Loading Indicator
Autor: Jack Rugile;
Programmiert in: HTML, CSS, JS (jQuery, lettering.js);
#42 Colored Loader
Autor: Dave McCarthy;
Programmiert in: HTML (Haml), CSS (Sass);
#43 Interactive Skate Loading
Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (GSAP);
#44 CSS Loading Animations
Autor: Alex;
Programmiert in: HTML, CSS;
#45 Pikachu Loading Page
Autor: Hazem Ashraf;
Programmiert in: HTML, CSS, JS (jQuery);
#46 Spinners using Font Icons
Autor: Keyamoon;
Programmiert in: HTML, CSS;
#47 TRON Spinner
Autor: simurai;
Programmiert in: HTML, CSS (SCSS);
#48 SpinKit
Autor: Nicola Pressi;
Programmiert in: HTML (Haml), CSS (SCSS);
#49 Loader
Autor: Vallée Antoine;
Programmiert in: HTML, CSS (SCSS);
#50 CSS3 Loading Spinner
Autor: Matthew Roelle;
Programmiert in: HTML (Haml), CSS (Sass);
#51 Loading animation by Kayleigh
Autor: Kayleigh Foley;
Programmiert in: HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js);
#52 Loading animation by Mohamed
Autor: Mohamed Yousef;
Programmiert in: HTML, CSS;
#53 HTML ve CSS ile Loading Animation | 10
Autor: 1kodum;
Programmiert in: HTML, CSS;
#54 HTML ve CSS ile Loading Animation | 7
Autor: 1kodum;
Programmiert in: HTML, CSS;
#55 HTML ve CSS ile Loading Animation | 8
Autor: 1kodum;
Programmiert in: HTML, CSS;
#56 HTML ve CSS ile Loading Animation Tasarlama | 2
Autor: 1kodum;
Programmiert in: HTML, CSS;
#57 HTML ve CSS ile Loading Animation | 5
Autor: 1kodum;
Programmiert in: HTML, CSS;
#58 HTML ve CSS ile Loading Animation | 4
Autor: 1kodum;
Programmiert in: HTML, CSS;
#59 Flight Loading Animation
Autor: Dinesh Basnet;
Programmiert in: HTML, CSS;
#60 Nvidia Loading Animation
Autor: gambhirsharma;
Programmiert in: HTML, CSS;
So fügst du die JS & CSS Ladeanimation in deine Webseite ein
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! 🙂
Hinweis: Alle Ladeanimationen sind alle auf codepen.io veröffentlicht und nicht von mir.
Noch nicht genug? Dann könnte das etwas für Dich sein:
Wie fandest du diesen Beitrag?


-
Pingback: 9 coole und inspirierende CSS Animationen (Oddly satisfying!)
-
Pingback: 25 brillante 404 Seiten mit coolen Animationen
-
Pingback: 35 coole CSS Buttons - mit Animationen!
-
Pingback: Top 20 CSS Navigation Menus