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

Nutzererfahrung verbessern und gleichzeitig Geld verdienen?

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;

Verdiene Geld mit deiner Website oder Blog

#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);

Nutzererfahrung verbessern und gleichzeitig Geld verdienen?

#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:

Ähnliche Beiträge
Beteilige dich an der Unterhaltung

4 Kommentare

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

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

Das könnte dich auch interessieren