A collection of loading indicators animated with CSS3.SpinKit uses CSS animations to create smooth and easily customizable animations. The goal is not to offer a solution that works in every browser. If you’re building a site with users running IE9 and below, you’ll want to detect support for the CSS animation attribute, and implement a fallback animation (e.g. a GIF.)
Best jQuery Preloader Plugins & Tutorials with Demo
SpinKit : Loading indicators animated with CSS3
Portfoliojs : jQuery plugin to showcase your Portfolio
Portfoliojs is a lightweight jQuery gallery plugin for your beautiful images with horizontal scrolling which supports desktop, tablet and mobile browsers.
Features:
- smart pre-loading
- set custom height & width of gallery
- set custom easingMethods for slide animation
- multiple gallery support
- lightbox
- keyboard navigation
- renders according to the device width. including mobile devices.
- supports touch devices (iPhone/iPad/Android) swipe-to-slide
CodingJack’s jQuery 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.
Features:
- 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.
MelonHTML5 : Royal Preloader with jQuery
Royal Preloader allows you to easily setup website images preloading in a loading screen and display the entire website instantly when it finishes. It comes with 8 pre-designed loaders and is super easy to install. All web browsers and mobile devices are fully supported. And all options can be customized via API.
Features:
- Preloading Website Images
- 8 Pre-Designed Loaders
- Display Loading Details
- Fully Customizable
- Easy to Install
- CSS3 animations + Fallback for IE
- Mobile Device Support
PreloadJS : Javascript to Manage and Co-ordinate the loading of assets
PreloadJS is a library to make working with asset preloading easier. It provides a consistent API for loading different file types, automatic detection of XHR (XMLHttpRequest) availability with a fallback to tag-base loading, composite progress events, and a plugin model to assist with preloading in other libraries such as SoundJS.
PreloadJS The wrapper that manages all preloading. Instantiate a PreloadJS instance, load a files or manifest, and track progress and complete events.
jPreLoader : jQuery Preloading Screen to Preload Images
Today I would like to share with you a brand new jQuery plugin, called jPreLoader. jPreLoadercan create a preloading screen for your website before all your images (including the images in CSS) are fully loaded. It will come in handy when you wish to preload all the images on your page before exposed to user. It’s useful for those games websites.
Well, you can also create a Splash Screen during preloading process to introduce your products, or describe about your page, or show the instructions of gameplay as well as put an advertisement during the waiting time of your user.
