50 inspirierende Ladeanimationen (CSS & JavaScript)

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

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

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;

#26 Authentic Weather Loader

See the Pen Authentic Weather Loader by Tim Holman (@tholman) on CodePen.

Autor: Tim Holman;
Programmiert in: HTML, CSS (SCSS);

#27 Loading Animation with Morphing SVG

See the Pen Loading Animation with Morphing SVG! by Heather Buchel (@hbuchel) on CodePen.

Autor: Heather Buchel;
Programmiert in: HTML, CSS (SCSS);

#28 CSS open store animation

See the Pen CSS open store animation by Mariana Beldi (@marianab) on CodePen.

Autor: Mariana Beldi;
Programmiert in: HTML, CSS;

#29 CSS Loading Animation

See the Pen CSS Loading Animation by Ahmad Emran (@ahmadbassamemran) on CodePen.

Autor: Ahmad Emran;
Programmiert in: HTML, CSS;

#30 Cat Loader

See the Pen #07animation: cat loader by Claudia (@eyesight) on CodePen.

Autor: Claudia;
Programmiert in: HTML, CSS (SCSS), JS (TweenMax.js);

#31 Button Loading Animation

See the Pen Button Loading Animation by Joshua Ward (@joshuaward) on CodePen.

Autor: Joshua Ward;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);

#32 Floating Loading Animation

See the Pen Floating Loading Animation by Mario Duarte (@MarioDesigns) on CodePen.

Autor: Mario Duarte;
Programmiert in: HTML, CSS (SCSS);

#33 Organic Button

See the Pen Organic Button by Rik Schennink (@rikschennink) on CodePen.

Autor: Rik Schennink;
Programmiert in: HTML, CSS (SCSS), JS;

#34 Switch loading animation

See the Pen Switch loading animation by Aaron Iker (@aaroniker) on CodePen.

Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);

#35 Download progress animation

See the Pen Download progress animation by Aaron Iker (@aaroniker) on CodePen.

Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (GSAP);

#36 CSS3 Loading animations

See the Pen CSS3 Loading animations by Manoz (@Manoz) on CodePen.

Autor: Manoz;
Programmiert in: HTML, CSS;

#37 CSS3 Loader & Spinners

See the Pen CSS3 Loader & Spinners by Vineeth.TR (@vineethtrv) on CodePen.

Autor: Vineeth.TR;
Programmiert in: HTML (Pug), CSS (SCSS);

#38 Download Button Animation

See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.

Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (GSAP);

#39 Cat loader

See the Pen [CSS] Cat loader by Rplus (@Rplus) on CodePen.

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

#40 Loading

See the Pen Loading by Vladislav Trefil (@v_trefil) on CodePen.

Autor: Vladislav Trefil;
Programmiert in: HTML (Pug), CSS (Sass), JS (jQuery);

#41 Glitch Loading Indicator

See the Pen Glitchy Loading Indicator by Jack Rugile (@jackrugile) on CodePen.

Autor: Jack Rugile;
Programmiert in: HTML, CSS, JS (jQuery, lettering.js);

#42 Colored Loader

See the Pen Untitled by Dave McCarthy (@AsLittleDesign) on CodePen.

Autor: Dave McCarthy;
Programmiert in: HTML (Haml), CSS (Sass);

#43 Interactive Skate Loading

See the Pen Interactive Skate Loading by Aaron Iker (@aaroniker) on CodePen.

Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (GSAP);

#44 CSS Loading Animations

See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.

Autor: Alex;
Programmiert in: HTML, CSS;

#45 Pikachu Loading Page

See the Pen Pikachu Loading Page by Hazem Ashraf (@Tetsu) on CodePen.

Autor: Hazem Ashraf;
Programmiert in: HTML, CSS, JS (jQuery);

#46 Spinners using Font Icons

See the Pen Spinners using Font Icons by Keyamoon (@Keyamoon) on CodePen.

Autor: Keyamoon;
Programmiert in: HTML, CSS;

#47 TRON Spinner

See the Pen TRON Spinner by simurai (@simurai) on CodePen.

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

#48 SpinKit

See the Pen SpinKit by Nicola Pressi (@ibanez182) on CodePen.

Autor: Nicola Pressi;
Programmiert in: HTML (Haml), CSS (SCSS);

#49 Loader

See the Pen Loader by Vallée Antoine (@Antoine-360pixel) on CodePen.

Autor: Vallée Antoine;
Programmiert in: HTML, CSS (SCSS);

#50 CSS3 Loading Spinner

See the Pen CSS3 Loading Spinner by Matthew Roelle (@Mattykins) on CodePen.

Autor: Matthew Roelle;
Programmiert in: HTML (Haml), CSS (Sass);

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: