If you are a web designer this article is for you. Sometimes it takes a few seconds for a complex website or application to load. So that your visitor knows that something is happening, you should definitely include a loading animation – this is also quite simple, as I will demonstrate at the end of the post with a short video.
Contents
- 1 1. Dump Truck Loading Animation
- 2 #2 Square in a circle – Loading Animation
- 3 #3 Rainbow Loader
- 4 #4 CSS Text filling with water
- 5 #5 Single Element CSS-Only Absolute Center Overlay Spinner
- 6 #6 Material Design Spinner
- 7 #7 Loading
- 8 #8 Cog loading animation
- 9 #9 Cube loading animation
- 10 #10 CSS loading animation 12
- 11 #11 Loading Animation
- 12 #12 Pacman loading animation in one div
- 13 #13 Loading Animation CSS
- 14 #14 CSS Dash Loader
- 15 #15 Compose loading animation
- 16 #16 CSS Loading Animation
- 17 #17 Only CSS Loader – Wizard
- 18 #18 Random geometric shapes loading animation
- 19 #19 Canvas loading animation
- 20 #20 XBox SmartGlass Loading Animation
- 21 #21 Loading Animation MySensors
- 22 #23 Loading Animation
- 23 #24 Rotate / Pulse Loading Animation
- 24 #25 CSS Loading Animation
- 25 #26 Authentic Weather Loader
- 26 #27 Loading Animation with Morphing SVG
- 27 #28 CSS open store animation
- 28 Conclusion
1. Dump Truck Loading Animation
See the Pen
Dump Truck Loading Animation by Jon Kantner (@jkantner)
on CodePen.
Author: Jon Kantner;
Coded 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.
Author: Ray;
Coded in: HTML, CSS (SCSS);
#3 Rainbow Loader
See the Pen
Rainbow Loader by Jack Rugile (@jackrugile)
on CodePen.
Author: Jack Rugile;
Coded in: HTML, CSS;
#4 CSS Text filling with water
See the Pen
CSS Text filling with water by Lucas Bebber (@lbebber)
on CodePen.
Author:Lucas Bebber;
Coded 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.
Author: MattIn4D;
Coded in: HTML, CSS;
#6 Material Design Spinner
See the Pen
Material Design Spinner by Fran Pérez (@mrrocks)
on CodePen.
Author: Fran Pérez;
Coded in: HTML, CSS (SCSS);
#7 Loading
See the Pen
Loading by dissimulate (@dissimulate)
on CodePen.
Author: dissimulate;
Coded in: HTML, CSS;
#8 Cog loading animation
See the Pen
Cog loading animation by Jamie Coulter (@jcoulterdesign)
on CodePen.
Author: Jamie Coulter;
Coded in: HTML (Haml), CSS (SCSS);
#9 Cube loading animation
See the Pen
Cube loading animation by Paul Grant (@cssinate)
on CodePen.
Author: Paul Grant;
Coded in: HTML, CSS (SCSS);
#10 CSS loading animation 12
See the Pen
CSS loading animation 12 by Martin van Driel (@martinvd)
on CodePen.
Author: Martin van Driel;
Coded in: HTML, CSS;
#11 Loading Animation
See the Pen
Loading Animation by loic (@loic_album)
on CodePen.
Author: Ioic;
Coded 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.
Author: Iddar Olivares;
Coded in: HTML, CSS (Less);
#13 Loading Animation CSS
See the Pen
Loading Animation CSS by Tatsuya Azegami (@42EG4M1)
on CodePen.
Author: Tatsuya Azegami;
Coded in: HTML, CSS (SCSS);
#14 CSS Dash Loader
See the Pen
CSS Dash Loader by Cassidy (@cassidoo)
on CodePen.
Author: Cassidy Williams;
Coded in: HTML, CSS;
#15 Compose loading animation
See the Pen
Compose loading animation by Brandon Mathis (@imathis)
on CodePen.
Author: Brandon Mathis;
Coded in: HTML, CSS (SCSS);
#16 CSS Loading Animation
See the Pen
CSS Loading Animation by John Urbank (@jurbank)
on CodePen.
Author: John Urbank;
Coded in: HTML (Haml), CSS (Sass);
#17 Only CSS Loader – Wizard
See the Pen
Only CSS Loader – Wizard by Guilmain Dorian (@Craaftx)
on CodePen.
Author: Guilmain Dorian;
Coded 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.
Author: Tony Banik;
Coded in: HTML (Slim), CSS (SCSS), JS
#19 Canvas loading animation
See the Pen
Canvas loading animation by Rachel Smith (@rachsmith)
on CodePen.
Author: Rachel Smith;
Coded in: HTML, CSS (SCSS), JS;
#20 XBox SmartGlass Loading Animation
See the Pen
XBox SmartGlass Loading Animation by Adam Argyle (@argyleink)
on CodePen.
Author: Adam Argyle;
Coded in: HTML (Pug), CSS (Stylus);
#21 Loading Animation MySensors
See the Pen
Loading Animation MySensors by Edoardo (@edoardoo)
on CodePen.
Author: Edoardo;
Coded in: HTML, CSS (SCSS);
#23 Loading Animation
See the Pen
Loading Animation by John Heiner (@johnheiner)
on CodePen.
Author: John Heiner;
Coded in: HTML, CSS (SCSS);
#24 Rotate / Pulse Loading Animation
See the Pen
Rotate / Pulse Loading Animation by Colin Horn (@colinhorn)
on CodePen.
Author: Colin Horn;
Coded in: HTML, CSS (SCSS), JS;
#25 CSS Loading Animation
See the Pen
CSS Loading Animation by Glen Cheney (@Vestride)
on CodePen.
Author: Glen Cheney;
Coded in: HTML (Haml), CSS (SCSS), JS;
#26 Authentic Weather Loader
See the Pen
Authentic Weather Loader by Tim Holman (@tholman)
on CodePen.
Author: Tim Holman;
Coded in: HTML, CSS (SCSS);
#27 Loading Animation with Morphing SVG
See the Pen
Loading Animation with Morphing SVG! by Heather Buchel (@hbuchel)
on CodePen.
Author: Heather Buchel;
Coded in: HTML, CSS (SCSS);
#28 CSS open store animation
See the Pen
CSS open store animation by Mariana Beldi (@marianab)
on CodePen.
Author: Mariana Beldi;
Coded in: HTML, CSS;
Conclusion
Which loading animation did you like best? If you have also published a loading animation on codepens, please let me know so that I can expand this list!