18+ JavaScript Loader Design Examples – csshint

Infinity Loader

Author

Aaron Iker

Made with

HTML, CSS (SCSS), JS

Demo / Code Get Hosting

Play Fill Loader

Author

Chris Gannon

Made with

HTML, CSS, JS

Demo / Code Get Hosting

Illuminati-Rainbow Loading

Author

foleyatwork

Made with

HTML, CSS (Less), JS (Babel)

Demo / Code Get Hosting

Javascript Loading

Author

Vladislav Trefil

Made with

HTML (Pug), CSS (sass), JS

Demo / Code Get Hosting

Preloader with Anime.js

Author

Kevin Konrad Henriquez

Made with

HTML (Haml), CSS (SCSS), JS

Demo / Code Get Hosting

Loading With %

Author

airpwn

Made with

HTML, CSS, JS

Demo / Code Get Hosting

Glitchy Loading Indicator

Author

Jack Rugile

Made with

HTML, CSS, JS

Demo / Code Get Hosting

Page loader

Author

Joshua Nwosu

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/MyXoToD/pen/oYyGry"> Javascript Loader with Steps</a> by Max (<a href="https://codepen.io/MyXoToD">@MyXoToD</a>) on <a href="https://codepen.io">CodePen</a>.

Javascript Loader with Steps

Author

Max

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/saifkeralite/pen/yLBQaaY"> JS pure loader</a> by Muhammed Saifudeen (<a href="https://codepen.io/saifkeralite">@saifkeralite</a>) on <a href="https://codepen.io">CodePen</a>.

JS pure loader

Author

Muhammed Saifudeen

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/iiSeptum/pen/iIbaF"> CSS/JS loader dots</a> by Martynas Linkevicius (<a href="https://codepen.io/iiSeptum">@iiSeptum</a>) on <a href="https://codepen.io">CodePen</a>.

CSS/JS loader dots

Author

Martynas Linkevicius

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/Kallissien/pen/awOzLV"> Loading Screen</a> by Luke Costi (<a href="https://codepen.io/Kallissien">@Kallissien</a>) on <a href="https://codepen.io">CodePen</a>.

Loading Screen

Author

Luke Costi

Made with

HTML, CSS, JS

Demo / Code Get Hosting

See the Pen <a href="https://codepen.io/kman/pen/Lncta"> Loading ( A progress like :p)</a> by Kaushalya R. Mandaliya (<a href="https://codepen.io/kman">@kman</a>) on <a href="https://codepen.io">CodePen</a>.