J'aime. make loading animation progress bar lorsque j'utilise AJAX sur JavaScriptBank. com. Aujourd'hui, nous voyons beaucoup de. effets de charge avec jQuery HTML/CSS/JS sur de nombreux sites , en particulier ceux qui sont chassés AJAX. JavaScript animation de chargement est extrêmement utile pour permettre aux utilisateurs de savoir que le serveur traite la demande de la cilent. Ne pas sous estimer , elle peut faire une. site sensible d' interaction de l'utilisateur. Il est utilisé comme une indication de quelque chose qui se passe derrière la scène , et d'informer les utilisateurs à attendre pendant un certain temps.


. loading animation bars ne se limite plus au format GIF animé , il peut être générée avec JavaScript et hautement personnalisable. Donc, dans ce post,. JavaScriptBank.com est heureux de vous suggérer. 20 , les bibliothèques de l'animation de chargement impressionnant utiles et créatifs pour stimuler votre site .

• Demo
• Agrandir
• Recharger
• New window

---

Javascript - VML & Canvas

I found total of 5 JavaScript that generate loading animation. Unfortunately, not all of them can work in older browsers such as IE6, 7 and 8. However I found two Javascripts - activity indicator and spin.js that support both VML (IEs support) and Canvas (Modern browsers).

Activity Indicator

A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. This work almost the same with spin.js except it relies on jQuery.

• Lightweight script
• Resolution independent
• Alpha transparency
• Highly configurable appearance
• Works in all major browsers
• Uses feature detection
• Degrades gracefully

Canvas Loader

This plugin replaces typical animated gif loading image with a canvas based loader of the same width and height. This is super helpful when developing mobile apps that might be viewed on Android. It will also detect to see if you have canvas support before applying the replacement. Limited styles, only work in browser with Canvas Support

Sonic Looping Loader

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. This is a really cool javascript preloader, but unfortunately your browser need to support canvas.

• Highly configurable, but only work with browsers with Canvas Support
• Small file size ~3k minified
• Customizable preloader style

HeartCode Canvas Loader

The Heartcode CanvasLoader is a lightweight JavaScript UI library, which uses the HTML5 Canvas element to draw and animate circular preloaders. The Heartcode CanvasLoader runs in every 'good' browser which supports the HTML5 Canvas element.

• Only work in browser with Canvas Support
• An UI to customize preloader

Spin.js

Spin.js can be easily be the best among the rest because of its support of old browsers. It also come with an UI to customize your own preloader.

• 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

Animated Gif Generators

Following by Animated Gif version. The difference between animated Gif version and JavaScript version is GIF usually come with a lot of different designs.

Preloaders.net

Chimply

AjaxLoad

LoadInfo

CSS3 Loading Animation

CSS3 Loading Animation Loop

Three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery.

CSS Loading Animation Circle Style

Loading CSS spinners and bars generator for AJAX & JQuery

CSS3 loading spinners without images

Bouncy Animated Loading Animation

Simple Loading Modal

PageLoading – jQuery plugin

Image Loader (jQuery Plugin)

Ajax Style Loading Animation in CSS3 (no Images)

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.

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.

That's about it. When I was doing research about it, apparently it's still a new solutions, not many Javascript plugins out there doing it. Thanks for your support.

---

Auteur

Phong Thai is a Web Developer, Web Coder for 20 years with PHP, JavaScript, CSS. He is the creator of JavaScriptBank.com - provide thousands of free JavaScript code examples, web development tips and tricks, helpful blogging guides.

Follow him on twitter@js_bank or connect with him on facebook@jsbank if you want. His websites for your knowledge: javascriptON.com, inOneSec.com, www.gomymobi.com

• Code
• Imprimer

• Commentaire (0)
• Écrire

• Sent (0)
• Nouveau