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 Loadern und 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
See the Pen
Dump Truck Loading Animation by Jon Kantner (@jkantner)
on CodePen.
Progrmmiert 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.
Progrmmiert in
HTML, CSS (SCSS)
#3 Rainbow Loader
See the Pen
Rainbow Loader by Jack Rugile (@jackrugile)
on CodePen.
#4 CSS Text filling with water
See the Pen
CSS Text filling with water by Lucas Bebber (@lbebber)
on CodePen.
Progrmmiert 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.
#6 Material Design Spinner
See the Pen
Material Design Spinner by Fran Pérez (@mrrocks)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#7 Loading
See the Pen
Loading by dissimulate (@dissimulate)
on CodePen.
#8 Cog loading animation
See the Pen
Cog loading animation by Jamie Coulter (@jcoulterdesign)
on CodePen.
Progrmmiert in
HTML (Haml), CSS (SCSS)
#9 Cube loading animation
See the Pen
Cube loading animation by Paul Grant (@cssinate)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#10 CSS loading animation 12
See the Pen
CSS loading animation 12 by Martin van Driel (@martinvd)
on CodePen.
#11 Loading Animation
See the Pen
Loading Animation by loic (@loic_album)
on CodePen.
Progrmmiert 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.
Progrmmiert in
HTML, CSS (Less)
#13 Loading Animation CSS
See the Pen
Loading Animation CSS by Tatsuya Azegami (@42EG4M1)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#14 CSS Dash Loader
See the Pen
CSS Dash Loader by Cassidy Williams (@cassidoo)
on CodePen.
#15 Compose loading animation
See the Pen
Compose loading animation by Brandon Mathis (@imathis)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#16 CSS Loading Animation
See the Pen
CSS Loading Animation by John Urbank (@jurbank)
on CodePen.
Progrmmiert in
HTML (Haml), CSS (Sass)
#17 Only CSS Loader – Wizard
See the Pen
Only CSS Loader – Wizard by Guilmain Dorian (@Craaftx)
on CodePen.
Progrmmiert 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.
Progrmmiert in
HTML (Slim), CSS (SCSS), JS
#19 Canvas loading animation
See the Pen
Canvas loading animation by Rachel Smith (@rachsmith)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#20 XBox SmartGlass Loading Animation
See the Pen
XBox SmartGlass Loading Animation by Adam Argyle (@argyleink)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Stylus)
#21 Loading Animation MySensors
See the Pen
Loading Animation MySensors by Edoardo (@edoardoo)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#22 CSS Pancake Loader
See the Pen
CSS Pancake Loader by Dario Corsi (@dariocorsi)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#23 Loading Animation
See the Pen
Loading Animation by John Heiner (@johnheiner)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#24 Rotate / Pulse Loading Animation
See the Pen
Rotate / Pulse Loading Animation by Colin Horn (@colinhorn)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#25 CSS Loading Animation
See the Pen
CSS Loading Animation by Glen Cheney (@Vestride)
on CodePen.
Progrmmiert in
HTML (Haml), CSS (SCSS), JS
#26 Authentic Weather Loader
See the Pen
Authentic Weather Loader by Tim Holman (@tholman)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#27 Loading Animation with Morphing SVG
See the Pen
Loading Animation with Morphing SVG! by Heather Buchel (@hbuchel)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#28 CSS open store animation
See the Pen
CSS open store animation by Mariana Beldi (@marianab)
on CodePen.
#29 CSS Loading Animation
See the Pen
CSS Loading Animation by Ahmad Emran (@ahmadbassamemran)
on CodePen.
#30 Cat Loader
See the Pen
#07animation: cat loader by Claudia (@eyesight)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (TweenMax.js)
See the Pen
Button Loading Animation by Joshua Ward (@joshuaward)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
#32 Floating Loading Animation
See the Pen
Floating Loading Animation by Mario Duarte (@MarioDesigns)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
See the Pen
Organic Button by Rik Schennink (@rikschennink)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS
#34 Switch loading animation
See the Pen
Switch loading animation by Aaron Iker (@aaroniker)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (jQuery)
#35 Download progress animation
See the Pen
Download progress animation by Aaron Iker (@aaroniker)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (GSAP)
#36 CSS3 Loading animations
See the Pen
CSS3 Loading animations by Manoz (@Manoz)
on CodePen.
#37 CSS3 Loader & Spinners
See the Pen
CSS3 Loader & Spinners by Vineeth.TR (@vineethtrv)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (SCSS)
See the Pen
Download Button Animation by Aaron Iker (@aaroniker)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (GSAP)
#39 Cat loader
See the Pen
[CSS] Cat loader by Rplus (@Rplus)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (SCSS)
#40 Loading
See the Pen
Loading by Vladislav Trefil (@v_trefil)
on CodePen.
Progrmmiert in
HTML (Pug), CSS (Sass), JS (jQuery)
#41 Glitch Loading Indicator
See the Pen
Glitchy Loading Indicator by Jack Rugile (@jackrugile)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery, lettering.js)
#42 Colored Loader
See the Pen
Untitled by Dave McCarthy (@AsLittleDesign)
on CodePen.
Progrmmiert in
HTML (Haml), CSS (Sass)
#43 Interactive Skate Loading
See the Pen
Interactive Skate Loading by Aaron Iker (@aaroniker)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS), JS (GSAP)
#44 CSS Loading Animations
See the Pen
CSS Loading Animations by Alex (@AlexWarnes)
on CodePen.
#45 Pikachu Loading Page
See the Pen
Pikachu Loading Page by Hazem Ashraf (@Tetsu)
on CodePen.
Progrmmiert in
HTML, CSS, JS (jQuery)
#46 Spinners using Font Icons
See the Pen
Spinners using Font Icons by Keyamoon (@Keyamoon)
on CodePen.
#47 TRON Spinner
See the Pen
TRON Spinner by simurai (@simurai)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#48 SpinKit
See the Pen
SpinKit by Nicola Pressi (@ibanez182)
on CodePen.
Progrmmiert in
HTML (Haml), CSS (SCSS)
#49 Loader
See the Pen
Loader by Vallée Antoine (@Antoine-360pixel)
on CodePen.
Progrmmiert in
HTML, CSS (SCSS)
#50 CSS3 Loading Spinner
See the Pen
CSS3 Loading Spinner by Matthew Roelle (@Mattykins)
on CodePen.
Progrmmiert in
HTML (Haml), CSS (Sass)
#51 Loading animation by Kayleigh
See the Pen
Loading animation by Kayleigh Foley (@kayfo23)
on CodePen.
Progrmmiert in
HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js)
#52 Loading animation by Mohamed
See the Pen
Loading Animation by Mohamed Yousef (@Freeps2)
on CodePen.
#53 HTML ve CSS ile Loading Animation | 10
See the Pen
HTML ve CSS ile Loading Animation | 10 by 1kodum (@1kodum)
on CodePen.
#54 HTML ve CSS ile Loading Animation | 7
See the Pen
HTML ve CSS ile Loading Animation | 7 by 1kodum (@1kodum)
on CodePen.
#55 HTML ve CSS ile Loading Animation | 8
See the Pen
HTML ve CSS ile Loading Animation | 8 by 1kodum (@1kodum)
on CodePen.
#56 HTML ve CSS ile Loading Animation Tasarlama | 2
See the Pen
HTML ve CSS ile Loading Animation Tasarlama | 2 by 1kodum (@1kodum)
on CodePen.
#57 HTML ve CSS ile Loading Animation | 5
See the Pen
HTML ve CSS ile Loading Animation | 5 by 1kodum (@1kodum)
on CodePen.
#58 HTML ve CSS ile Loading Animation | 4
See the Pen
HTML ve CSS ile Loading Animation | 4 by 1kodum (@1kodum)
on CodePen.
#59 Flight Loading Animation
See the Pen
Flight Loading Animation by Dinesh Basnet (@iamdineshbasnet)
on CodePen.
#60 Nvidia Loading Animation
See the Pen
Nvidia Loading Animation by gambhirsharma (@gambhirsharma)
on CodePen.
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: