9 Epic Js and CSS loader & spinner animations with code

Loader and Spinner Animations:

Loader animations are a great way in enhancing the user experience of your website or application. In this list I have collected some great loader and spinner animations from codepen. Some of them are in CSS only but some also use Js. There are all different types from loading bar to spinners. I hope you like them. One thing to keep in mind is that they are not made by me but by their respective owners and all credit goes to them.

12 elegant loader in CSS

These are some awesome loader animations. Flat, elegant and in pure CSS.
See the Pen Loaders (WIP) by Tania LD (@TaniaLD).

---

3×3 block grid CSS Loader

This is a css loader based on a gif (http://imgur.com/iWGr9AP). Simple are awesome!
See the Pen CSS Loader by Glen Cheney (@Vestride).

---

OuroboroCSS Loader

Different types of CSS spinner, you can chose which one you want.
See the Pen CSS Loader by Geoffrey Crofte (@CreativeJuiz).

---

Love Loader CSS+Js

Heart loading screen make in Js. There is equation in Js to make that Heart but you can change it to make anything else.
See the Pen Love Loader by Abhishek Hingnikar (@darkyen).

---

Sparking Light Loading bar

A canvas loading that sparks changing colors light from red to green.
See the Pen Light Loader by Jack Rugile (@jackrugile)

---

Single element slack loader

See the Pen Single element Slack loader by CrocoDillon (@CrocoDillon)
Simple single element loader made in CSS. Looks just beautiful.

---

CSS3 Loader

See the Pen CSS3 Loader by Markus Schott (@MRKS).
Simple loader in big key-frame animation built using bounce.js

---

Windows 8 Style loading

See the Pen Windows 8, Responsive page loader by George Beresford (@thetwistedtaste) on CodePen.
Windows 8 loading screen like loader made in CSS and Jquery.

---

CSS loading

See the Pen CSS Loader by Erik Royall (@erikroyall) on CodePen.
Loader made in pure CSS.