CodingJack’s Percentage Preloader
In the days of Flash we had lots of beautiful percentage-based preloaders. But when websites starting switching over to HTML/CSS/JavaScript, they’ve become almost extinct. Percentage Preloader isn’t ground-breaking technology. Instead, it’s a a clever script that when used correctly, is a fresh alternative to the typical infinite-based preloaders we’re so used to seeing these days.
Percentage Preloader is what developers typically call a “bulk loader”. If you only have a one or two assets you need to preload, Percentage Preloader is not for you. But when used with a large number of assets (5+), Percentage Preloader works great at creating the illusion of progress.
Easy to Use
- Dark and Light Color Schemes
- 8 Pre-Built Preloaders
- Designed with CSS making them easy to edit and retina-ready.
- Preload all the images and iframes on your web page by adding a simple data-attribute to your images.
Advanced Preloading for Developers
- Add the preloader to an image-based component such as a slider or gallery.
- Preload images, iframes, scripts, stylesheets, html, xml and php files.
- Core script allows you to return a preload percentage which can be used any way you want, such as building your own custom percentage-based preloader.
- Fire a global onload callback on all items or assign individual onload callbacks to any given item.
- Create multiple preloaders or reuse a single preloader and apply methods such as “reset”, “start” and “destroy”.
- Full API Usage can be viewed here.
Special Notes
- Very large images (all over 1mb) are used in the preview to elaborate the preloading process. If the previews are slow on your connection speed, they will be much faster when used with normal sized images.
- Images used in the preview are for demonstration purposes only and are not included in the download source.
- Although the download source contains examples of the preloader being used in a slider, because all JavaScript-based components are different, individual component installation will vary. For this reason, it’s strongly suggested that component usage be reserved for JavaScript developers only.
- The stripes in the stripe-based preloader included in the download source will not animate in IE9. And in IE8 stripes will not be shown. But in both cases, the bar will still show progress.
- When the fullscreen preloaders are used on mobile, you may experience a brief “flicker” when the loading process is complete. This is due to the preloader’s fixed position nature.
- Two of the preloaders use HTML5 to programmatically draw a circle around a text field. In browsers that don’t support html5 (IE8), the only the text field will be shown.
More plugins by CodingJack
