Circular Preloader

Flexible, Smooth & Lightweight


Circular HTML5 Preloader is a jQuery Plugin designed for loading images and assets dynamically through javascript. It displays a flexible, animated circular progress bar drawn completely in SVG. This means it will look smooth on any device at any size.

Built with the most popular libraries available, it's rendered with Snap.svg animated with GreenSock and uses PreloadJS as its core.

It adds a minimal load to your pages with a footprint of only 3kbytes!¹ You'll get over 30 options to customize your own Circular Preloader. It has been tested on all major browsers and works neatly also on mobile devices.

¹Size achieved with Gzip compression and excluding dependencies of other libraries.



Preloading files can be a tough task. Circular HTML5 Preloader will take care of any kind of files you need to store in the browser cache no matter if you need to load only single images or whole websites, it will fit the job with its flexibility.

Supported Files

Circular HTML5 Preloader was built mainly for preloading images. Though, you can use the queue function and load any kind of files including images, svg, js, css, json and xml files.

The parameter works as proxy to the queue used in PreloadJS and it allows you to push any kind of argument supported by the library.


Built as jQuery Plugin you can handle it with ease. Just hook it to your DOM element and it will run on it's own.


You can also avoid any call and just let the plugin do all the work, by adding an autoload attribute to your element.


Want full control of the progress during the preloading? Circular HTML5 Preloader offers you several callbacks that allow you to keep track of the progress of the loading and create your own functions triggered directly through javascript.

You can push your own scripts during the loading and even on complete.

Small Footprint

The animations are smooth and use a very low amount of processing power. There is also a built-in garbage collection routine for keeping memory usage low.

Circular HTML5 Preloader weights only 3kbytes when compressed and 8kbytes in the minified version.

Mobile Friendly

Small screens will display the preloader smoothly and without any issues. Since it's rendered in SVG you won't ever again spot blurred edges on retina screens as it's completely vectorial and easy to resize for any device.

Circular HTML5 Preloader works neatly with any responsive layout.


Circular HTML5 Preloader can be customized in several ways. It comes with optimized default values, but you're free to play with over 30 parameters. Personalize it by overwriting the existing setup with a custom one.

Integrating it inside your own projects will be a piece of cake.

© 2015 All Rights Reserved.
Made with in Italy.