14 Free jQuery Preloader Plugins

A jQuery preloader helps us web designers to make the website’s user experience better by adding interactivity.
They keep the user engaged when he is actually at halt because the images or data is loading. This is the reason why clients very often demand a preloading animation on their website.

There are many kinds of preloaders. In the earlier days, flash based preloaders were the most obvious element but these days jQuery has taken over.

jQuery preloader plugins work charms and after the rise of CSS3, things have become fairly easy, yet staying stylish.

The only problem in all this is that Internet Explorer 8 is playing the villain’s role by not supporting many of the CSS3 animations. So when you use an animation from the following plugins, make sure to test it in all browsers before making it live.

jQuery Preloader Plugins


This one is my favorite from the lot. It contains five different loaders. I have made the screenshot of my favorite one but you can find links to all demos below the image.

jQuery Preloader

Demos: 1 | 2 | 3 | 4 | 5 | – Download

Sonic – Looping Loaders

This is a tiny (~3kb minified) JavaScript “class”. It create elements which eat their own tail…. remember that snake game we used to play, just like that.
Sonic uses <canvas> element of HTML5. It draws a shape (by default 6 pixels square) at intervals along a pre-defined path. You can change or make your own path using functions: arc, line and bezier.

Sonic Preloaders


Custom Preloading Screen

This is a tutorial for creating custom preloading screens for one page websites because they tend to be bigger in size.

Custom preloading screen for one page websites



PreLoadMe is a lightweight preloader for any web content. It is fully responsive and will run on all modern desktop and mobile browsers with no additional plugins.




Preloading Screen to Preload Images. This is a loading bar based on CSS3.
Notice: this bar might not display properly in Internet Explorer 8.

jQuery CSS based progress bar for preloader.


Ajax Style Loading Animation in CSS3

This is a good collection of pre-loaders. The internet audience is already familiar with these styles so they can indentified easily. Clients love them, so does the audience. CSS3 is used to develop these preloaders, I’m sure you’ll love them.



Bouncy Animated Loading Animation

This is the most common preloader. Youtube uses this design.

Youtube Style Preloader


CSS3 Loading Spinners Without Images

Another CSS3 based spinner. Design copied from Youtube again.

CSS Spinning Preloaders

Demo – Tutorial

CSS3 Loading Animation

3 simple but effective CSS3 loading animations.
Notice: these animations will NOT be visible in Internet Explorer 8.

CSS3 Loading Animations


 CSS3 Loading Animation Loop

Almost the same as above, the difference is only the design. These ones also won’t display on IE8.

CSS3 Loading Animation Loops


jQuery Preloader Generators

I saved this section for last. These are preloader generators so you can create preloading animations exactly the way you want.

CSS Load

Loading CSS spinners and bars generator for AJAX & jQuery

CSS Prealoader Generator

Demo & Tutorial

Canvas Loader Creator

The simplest and most common Youtube styled loading animation.

Canvas Loader Creator

Bonus jQuery Preloader Resource

There’s a jQuery directory called jQuery Rain. They have also made a list of jQuery preloaders which I found interesting. You can also check out their collection.