12 JQUERY PRELOAD PER I VOSTRI SITI

P.Y.G.

12 JQUERY PRELOAD PER I VOSTRI SITI

Un’ottima serie di Loaders jquery per fare il preload dei vostri progetti . Molto utile anche per capire il funzionamento dei preload in jquery e creare la propria versione personale .

Fonte:http://coding.designzzz.com/

Sonic – looping loaders

Sonic is a small (~3k minified) JS “class” you can use to create custom loading animations. It works best with looping animations — i.e. a snake that’s trying to eat its own tail.

Sonic uses the HTML5 <canvas> element/API. It works by drawing a shape (by default a 6px square) at tiny intervals along a pre-defined path. You can define the path using the functions: arc, bezier and line.

Demo – Tutorial

Ajax Style Loading Animation in CSS3

After Social Icons and CSS button , you guys need some Ajax style loading images , don’t you ?
As we all know loading images are very essential part of any website , but some time loading images takes time to load itself. But what if the images made up in CSS. So this time I used CSS3 to develop Ajax style loading animation.

Demo – Tutorial

Bouncy Animated Loading Animation

Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a GIF.

Demo – Tutorial

CSS3 Loading Spinners Without Images

CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting: This is a small experiment with the new CSS transforms in Firefox 3.5 and Webkit. — loading spinners using html, css and javascript. Tested in Firefox3.5 and Webkit. Feel free to use them

Demo - Tutorial

 CSS Loading Animation Circle Style

You can make animation for displaying the loading progress using clean CSS3 code. You can increase the size of the spheres by modifying the width and height in style classes: ul#transit li, .sphere and .beat. In this demo I have used 60px size for the loading spherical balls.

Demo – Tutorial

 Flickr Style Loading Animation Using JQuery

The flickr loading animation is simpler than the facebook style, it consist of two circles with different color, when the animation start the circle on the left move to right with on top display and vice versa.

Demo – Tutorial & Source Download

 CanvasLoader Creator

The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects. The Creator is using the CanvasLoader UI Library. To create your free preloader follow these 2 easy steps: Customize the preloader (on the left) by changing the settings.  Click the ‘Download custom CanvasLoader’ button to download your example HTML file, or use the code snippet

Demo & Tutorial

 CSS3 Loading Animation

Here are 3 simple CSS3 Loading Animations. Remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome

Demo – Tutorial

 CSS3 Loading Animation Loop

CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery. This animations are only visible in Firefox, Safari and Chrome.

Demo – Tutorial

 spin.js

If checked, the option values will be stored in the URL so that you can easily share your settings.
Features

No images, no external CSS
No dependencies (jQuery is supported, but not required)
Highly configurable
Resolution independent
Uses VML as fallback in old IEs
Uses @keyframe animations, falling back to setTimeout()
Works in all major browsers, including IE6
MIT License

Demo & Tutorial

CSS load

Loading CSS spinners and bars generator for AJAX & JQuery

Demo & Tutorial