60 CSS Loading Animations (where you like to wait! ⌛😊)
Tags: css, webdev, html, javascript
Published: 2020-10-30 11:59:59

> The use of loading animations is ideal for bridging waiting times on websites and in web applications. Here you will find a selection of the most creative and inspiring loading animations!

##_[Updated version is available (click)!](https://webdeasy.de/en/css-loading-animations/?referer=dev-updated-1b5f) 🔥_

Since the functionality and appearance of animations can be significantly improved by JavaScript, some come with JavaScript.

If you like a loading animation, you can simply **copy&paste**. 🙂 ([Licensing](https://blog.codepen.io/documentation/licensing/))

*Note: All buttons are all published on [codepen.io](https://codepen.io/) and not by me.*


## #1 Dump Truck Loading Animation
{% codepen https://codepen.io/jkantner/pen/EdBJxy default-tab=result %}
Author: [Jon Kantner](https://codepen.io/lbebber);
Coded in: HTML, CSS (SCSS), JS;


## #2 Square in a circle – Loading Animation
{% codepen https://codepen.io/raymondyang/pen/eWGewE default-tab=result %}
Author: [Ray](https://codepen.io/raymondyang);
Coded in: HTML, CSS (SCSS);


## #3 Rainbow Loader
{% codepen https://codepen.io/jackrugile/pen/JddmaX default-tab=result %}
Author: [Jack Rugile](https://codepen.io/jackrugile);
Coded in: HTML, CSS;


## #4 CSS Text filling with water
{% codepen https://codepen.io/lbebber/pen/xrwja default-tab=result %}
Author: [Lucas Bebber](https://codepen.io/lbebber);
Coded in: HTML, CSS (SCSS);


## #5 Single Element CSS-Only Absolute Center Overlay Spinner
{% codepen https://codepen.io/MattIn4D/pen/LiKFC default-tab=result %}
Author: [MattIn4D](https://codepen.io/lbebber);
Coded in: HTML, CSS;


## #6 Material Design Spinner
{% codepen https://codepen.io/mrrocks/pen/EiplA default-tab=result %}
Author: [Fran Pérez](https://codepen.io/mrrocks);
Coded in: HTML, CSS (SCSS);


## #7 Loading
{% codepen https://codepen.io/dissimulate/pen/vlfyA default-tab=result %}
Author: [dissimulate](https://codepen.io/dissimulate);
Coded in: HTML, CSS;

## #8 Cog loading animation
{% codepen https://codepen.io/jcoulterdesign/pen/bNxeKY default-tab=result %}
Author: [Jamie Coulter](https://codepen.io/dissimulate);
Coded in: HTML (Haml), CSS (SCSS);


## #9 Cube loading animation
{% codepen https://codepen.io/cssinate/pen/vXEwmX default-tab=result %}
Author: [Paul Grant](https://codepen.io/dissimulate);
Coded in: HTML, CSS (SCSS);


## #10 CSS loading animation 12
{% codepen https://codepen.io/martinvd/pen/xbQJom default-tab=result %}
Author: [Martin van Driel](https://codepen.io/martinvd);
Coded in: HTML, CSS;


## #11 Loading Animation
{% codepen https://codepen.io/loic_album/pen/VjQjKz default-tab=result %}
Author: [Ioic](https://codepen.io/loic_album);
Coded in: HTML, CSS (SCSS);


## #12 Pacman loading animation in one div
{% codepen https://codepen.io/iddar/pen/xwXowq default-tab=result %}
Author: [Iddar Olivares](https://codepen.io/iddar);
Coded in: HTML, CSS (Less);


## #13 Loading Animation CSS
{% codepen https://codepen.io/42EG4M1/pen/bVMzze default-tab=result %}
Author: [Tatsuya Azegami](https://codepen.io/42EG4M1);
Coded in: HTML, CSS (SCSS);


## #14 CSS Dash Loader
{% codepen https://codepen.io/cassidoo/pen/KRdLvL default-tab=result %}
Author: [Cassidy Williams](https://codepen.io/cassidoo);
Coded in: HTML, CSS;


## #15 Compose loading animation
{% codepen https://codepen.io/imathis/pen/ZYEWrw default-tab=result %}
Author: [Brandon Mathis](https://codepen.io/imathis);
Coded in: HTML, CSS (SCSS);


## #16 CSS Loading Animation
{% codepen https://codepen.io/jurbank/pen/KLeCv default-tab=result %}
Author: [John Urbank](https://codepen.io/jurbank);
Coded in: HTML (Haml), CSS (Sass);


## #17 Only CSS Loader – Wizard
{% codepen https://codepen.io/Craaftx/pen/ExyYRMK default-tab=result %}
Author: [Guilmain Dorian](https://codepen.io/Craaftx);
Coded in: HTML (Pug), CSS (SCSS);


## #18 Random geometric shapes loading animation
{% codepen https://codepen.io/banik/pen/qMyYmd default-tab=result %}
Author: [Tony Banik](https://codepen.io/banik);
Coded in: HTML (Slim), CSS (SCSS), JS;


## #19 Canvas loading animation
{% codepen https://codepen.io/rachsmith/pen/cmvsL default-tab=result %}
Author: [Rachel Smith](https://codepen.io/rachsmith);
Coded in: HTML, CSS (SCSS), JS;


## #20 XBox SmartGlass Loading Animation
{% codepen https://codepen.io/argyleink/pen/goyiI default-tab=result %}
Author: [Adam Argyle](https://codepen.io/argyleink);
Coded in: HTML (Pug), CSS (Stylus);


## #21 Loading Animation MySensors
{% codepen https://codepen.io/edoardoo/pen/mhJKn default-tab=result %}
Author: [Edoardo](https://codepen.io/edoardoo);
Coded in: HTML, CSS (SCSS);


## #22 CSS Pancake Loader
{% codepen https://codepen.io/dariocorsi/pen/wMQEgp default-tab=result %}
Author: [Dario Corsi](https://codepen.io/dariocorsi);
Coded in: HTML, CSS (SCSS);


## #23 Loading Animation
{% codepen https://codepen.io/johnheiner/pen/BNLzbJ default-tab=result %}
Author: [John Heiner](https://codepen.io/johnheiner);
Coded in: HTML, CSS (SCSS);


## #24 Rotate / Pulse Loading Animation
{% codepen https://codepen.io/colinhorn/pen/zdNMVy default-tab=result %}
Author: [Colin Horn](https://codepen.io/colinhorn);
Coded in: HTML, CSS (SCSS), JS;


## #25 CSS Loading Animation
{% codepen https://codepen.io/Vestride/pen/izIoh default-tab=result %}
Author: [Glen Cheney](https://codepen.io/Vestride);
Coded in: HTML (Haml), CSS (SCSS), JS;

---

### ➡️ [See the rest of the buttons on my blog](https://webdeasy.de/en/css-loading-animations/?action=read-more) ❤️