Circular Preloader
Flexible, Smooth & Lightweight
About
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.
Demos
Features
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.
Initialization
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.
$(".class").circularPreloader();You can also avoid any call and just let the plugin do all the work, by adding an autoload attribute to your element.
Callbacks
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.
Customizable
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.