30 个 jQuery & CSS3 加载动画和进度栏插件

àì夳堔傛蜴生んèń 2022-08-25 15:50 188阅读 0赞

### [Animated Progress Bars with CSS3][] ###

\[ [Demo][] | [Download][] \]

![Loading Animation-jquery-plugins-12][]

### [Spin JS Bar][] ###

\[ [Demo][Spin JS Bar] | [Download][Spin JS Bar] \]

![Loading Animation-jquery-plugins-13][]

### [The Facebook loading animation][] ###

\[ [Demo][Demo 1] | [Download][Download 1] \]

![Loading Animation-jquery-plugins-14][]

### [Flickr Style Loading Animation][] ###

\[ [Demo][Demo 2] | [Download][Download 2] \]

![Loading Animation-jquery-plugins-15][]

### [CSS3 Loading Spinners Without Images][] ###

\[ [Demo][Demo 3] | [Download][CSS3 Loading Spinners Without Images] \]

![Loading Animation-jquery-plugins-16][]

### [Sonic.js][] ###

\[ [Demo][Demo 4] | [Download][Download 3] \]

[![Loading Animation-jquery-plugins-17][]][Loading Animation-jquery-plugins-17 1]

### [QueryLoader2 – Preload your images with ease][QueryLoader2 _ Preload your images with ease] ###

\[ [Demo][Demo 5] | [Download][Download 4] \]

![Loading Animation-jquery-plugins-18][]

### [jQuery Progress Bar][] ###

\[ [Demo][jQuery Progress Bar] | [Download][jQuery Progress Bar] \]

![Loading Animation-jquery-plugins-19][]

### [jQuery Ajax Loader & Spinner][jQuery Ajax Loader _ Spinner] ###

\[ [Demo][Demo 6] | [Download][Download 5] \]

![Loading Animation-jquery-plugins-20][]

### [Animated jQuery Progressbar][] ###

\[ [Demo][Demo 7] | [Download][Download 6] \]

![Loading Animation-jquery-plugins-21][]

### [Automatic Page Load & Ajax Request Progress Bar][Automatic Page Load _ Ajax Request Progress Bar] ###

\[ [Demo][Demo 8] | [Download][Download 7] \]

![Loading Animation-jquery-plugins-22][]

### [CSS Load][] ###

\[ [Demo][CSS Load] | [Download][CSS Load] \]

![Loading Animation-jquery-plugins-23][]

### [Mambo][] ###

\[ [Demo][Demo 9] | [Download][Download 8] \]

![Loading Animation-jquery-plugins-24][]

### [Google Like jQuery Slim Progress Bar Plugin][] ###

\[ [Demo][Demo 10] | [Download][Download 9] \]

![Loading Animation-jquery-plugins-25][]

### [CanvasLoader Creator][] ###

\[ [Demo][CanvasLoader Creator] | [Download][Download 10] \]

![Loading Animation-jquery-plugins-26][]

### [Loader Bar][] ###

\[ [Demo][Loader Bar] | [Download][Download 11] \]

![Loading Animation-jquery-plugins-1][]

### [Animated Progress Bar][] ###

\[ [Demo][Demo 11] | [Download][Download 12] \]

![Loading Animation-jquery-plugins-2][]

### [Animated Progress Bar in 4 Lines of jQuery][] ###

\[ [Demo][Demo 12] | [Download][Download 13] \]

![Loading Animation-jquery-plugins-3][]

### [Fine Uploader][] ###

\[ [Demo][Demo 13] | [Download][Download 14] \]

![Loading Animation-jquery-plugins-29][]

### [CSS3 Loading Animation][] ###

\[ [Demo][Demo 14] | [Download][Download 15] \]

![Loading Animation-jquery-plugins-4][]

### [Beautiful CSS3 And jQuery progress Bar][] ###

\[ [Demo][Demo 15] | [Download][Download 16] \]

![Loading Animation-jquery-plugins-5][]

### [CSS3 Loading Animation Loop][] ###

\[ [Demo][Demo 16] | [Download][Download 17] \]

![Loading Animation-jquery-plugins-6][]

### [dwProgressBar][] ###

\[ [Demo][Demo 17] | [Download][Download 18] \]

![Loading Animation-jquery-plugins-7][]

### [Pure CSS Progress Bar][] ###

\[ [Demo][Pure CSS Progress Bar] | [Download][Download 19] \]

![Loading Animation-jquery-plugins-8][]

### [Smooth Progress Bar Loading Effect][] ###

\[ [Demo][Demo 18] | [Download][Download 20] \]

![Loading Animation-jquery-plugins-9][]

### [Animated Skills Diagram with Raphael][] ###

\[ [Demo][Demo 19] | [Download][Download 21] \]

![Loading Animation-jquery-plugins-10][]

### [Creating & Styling Progress Bar With HTML5][Creating _ Styling Progress Bar With HTML5] ###

\[ [Demo][Demo 20] | [Download][Download 22] \]

![Loading Animation-jquery-plugins-11][]

### [Ajax Style Loading Animation][] ###

\[ [Demo][Demo 21] | [Download][Download 23] \]

![Loading Animation-jquery-plugins-27][]

### [Animated Progress Bar][Animated Progress Bar 1] ###

\[ [Demo][Animated Progress Bar 1] | [Download][Animated Progress Bar 1] \]

![Loading Animation-jquery-plugins-28][]

### [jQuery Ajax Loading Overlay with Loading Text][] ###

\[ [Demo][Demo 22] | [Download][Download 24] \]

![Loading Animation-jquery-plugins-30][]

via [dizyne][]

### 相关链接 ###

*  jQuery 的详细介绍：[请点这里][Link 1]
 *  jQuery 的下载地址：[请点这里][Link 2]

想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：[请点这里][Link 3]

本站文章除注明转载外，均为本站原创或编译  
欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创开源社区  
转载请注明：文章转载自： 开源中国社区 \[ [http://www.oschina.net][http_www.oschina.net]\]  
本文标题：30 个 jQuery & CSS3 加载动画和进度栏插件  
本文地址： [http://www.oschina.net/news/49287/30-jquery-css3-loading-animation-progress-bar-plugins][http_www.oschina.net_news_49287_30-jquery-css3-loading-animation-progress-bar-plugins]

[Animated Progress Bars with CSS3]: http://sarahjustine.com/2013/03/24/animated-progress-bars-with-css3-2/
[Demo]: http://sarahjustine.com/demos/loader/progress_samples/index.html
[Download]: http://sarahjustine.com/demos/loader/progress_samples/progress_samples.zip
[Loading Animation-jquery-plugins-12]: /images/20220824/cbbc8a406e574aca8c9f00b1c7f99ae6.png
[Spin JS Bar]: http://fgnass.github.io/spin.js/
[Loading Animation-jquery-plugins-13]: /images/20220824/90acc915fdaa425292d76a56c9bf6230.png
[The Facebook loading animation]: http://www.marcofolio.net/css/css3_quickie_the_facebook_loading_animation.html
[Demo 1]: http://demo.marcofolio.net/facebook_loader/
[Download 1]: http://www.marcofolio.net/downloads/css/the_facebook_loading_animation/download.html
[Loading Animation-jquery-plugins-14]: /images/20220824/506614b05f3b4db3ab6616cddea3f8f7.png
[Flickr Style Loading Animation]: http://superdit.com/2011/02/25/flickr-style-loading-animation-using-jquery/
[Demo 2]: http://demo.superdit.com/jquery/flickr_loading_animation/
[Download 2]: http://www.box.net/shared/iy0a5hl401
[Loading Animation-jquery-plugins-15]: /images/20220824/349af21668f44ca1bc3a110959914bac.png
[CSS3 Loading Spinners Without Images]: http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
[Demo 3]: http://kilianvalkhof.com/uploads/spinners/
[Loading Animation-jquery-plugins-16]: /images/20220824/78ef0fc4e4754f4f919173214fa25bbc.png
[Sonic.js]: https://github.com/padolsey/sonic.js#readme
[Demo 4]: http://padolsey.net/p/Sonic/repo/demo/demo.html
[Download 3]: https://github.com/padolsey/sonic.js/archive/master.zip
[Loading Animation-jquery-plugins-17]: /images/20220824/e60576e23292444ca1c86147776110af.png
[Loading Animation-jquery-plugins-17 1]: http://dizyne.net/wp-content/uploads/2014/02/Loading-Animation-jquery-plugins-17.jpg
[QueryLoader2 _ Preload your images with ease]: http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
[Demo 5]: http://www.gayadesign.com/scripts/queryLoader2/
[Download 4]: https://github.com/Gaya/QueryLoader2/zipball/master
[Loading Animation-jquery-plugins-18]: /images/20220824/7c1edca6f5464d4892535b234ec41067.png
[jQuery Progress Bar]: http://www.webappers.com/progressBar/
[Loading Animation-jquery-plugins-19]: /images/20220824/fea12f070f0a4558b57900a2cafab6f9.png
[jQuery Ajax Loader _ Spinner]: http://www.aplusdesign.com.au/blog/jquery-ajax-loader-spinner/
[Demo 6]: http://www.aplusdesign.com.au/demos/ajax-loader/index.html
[Download 5]: http://www.aplusdesign.com.au/demos/ajax-loader/ajax-loader.zip
[Loading Animation-jquery-plugins-20]: /images/20220824/9c9ec460eb4b4bd0997c5248fe158c6c.png
[Animated jQuery Progressbar]: http://www.script-tutorials.com/animated-jquery-progressbar/
[Demo 7]: http://www.script-tutorials.com/demos/129/index.html
[Download 6]: http://www.script-tutorials.com/demos/129/source.zip
[Loading Animation-jquery-plugins-21]: /images/20220824/bd14c3f5bd7748a78131e3fda139ae03.png
[Automatic Page Load _ Ajax Request Progress Bar]: http://www.jqueryscript.net/loading/Automatic-Page-Load-Ajax-Request-Progress-Bar-Pace-js.html
[Demo 8]: http://github.hubspot.com/pace/docs/welcome/
[Download 7]: http://github.com/HubSpot/pace/archive/master.zip
[Loading Animation-jquery-plugins-22]: /images/20220824/8e83032559f944b682a375d48265e18a.png
[CSS Load]: http://cssload.net/
[Loading Animation-jquery-plugins-23]: /images/20220824/3c216baec7384de2b17aa8a3cb613933.png
[Mambo]: http://www.jqueryscript.net/other/jQuery-Plugin-For-Creating-Rounded-Badges-Using-Canvas-Mambo.html
[Demo 9]: http://www.valeriobarrila.com/mambo.html
[Download 8]: http://www.jqueryscript.net/download/jQuery-Plugin-For-Creating-Rounded-Badges-Using-Canvas-Mambo.zip
[Loading Animation-jquery-plugins-24]: /images/20220824/2ec5f389307646909a6b8facf20941bc.png
[Google Like jQuery Slim Progress Bar Plugin]: http://www.jqueryscript.net/loading/Google-Like-jQuery-Slim-Progress-Bar-Plugin-NProgress.html
[Demo 10]: http://www.jqueryscript.net/demo/Google-Like-jQuery-Slim-Progress-Bar-Plugin-NProgress
[Download 9]: http://www.jqueryscript.net/download/Google-Like-jQuery-Slim-Progress-Bar-Plugin-NProgress.zip
[Loading Animation-jquery-plugins-25]: /images/20220824/637f599dd2844baea6e05a20bc94ea57.png
[CanvasLoader Creator]: http://heartcode.robertpataki.com/canvasloader/
[Download 10]: http://heartcode.robertpataki.com/canvasloader/#
[Loading Animation-jquery-plugins-26]: /images/20220824/b8e61fae092b4fe78abf59fd03c91709.png
[Loader Bar]: http://widgets.better2web.com/loader/
[Download 11]: https://bitbucket.org/Better2Web/jquery.percentageloader
[Loading Animation-jquery-plugins-1]: /images/20220824/aecc4bc9c9e043e68fe8a242b762921a.png
[Animated Progress Bar]: http://www.cssflow.com/snippets/animated-progress-bar
[Demo 11]: http://www.cssflow.com/snippets/animated-progress-bar/demo
[Download 12]: http://www.cssflow.com/snippets/animated-progress-bar.zip
[Loading Animation-jquery-plugins-2]: /images/20220824/1964301d692742dcbc494590378208c7.png
[Animated Progress Bar in 4 Lines of jQuery]: http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/
[Demo 12]: http://workshop.rs/demo/progress-bar-in-4-lines/
[Download 13]: https://github.com/kopipejst/progressbar
[Loading Animation-jquery-plugins-3]: /images/20220824/f75a8a2654154ac59e9b7755103d5ae9.png
[Fine Uploader]: http://www.jqueryscript.net/other/Fine-Uploader-User-Friendly-File-Uploading-Plugin.html
[Demo 13]: http://fineuploader.com/#demo
[Download 14]: http://github.com/Widen/fine-uploader/archive/master.zip
[Loading Animation-jquery-plugins-29]: /images/20220824/79eb0429931346929324f2a7a7d65c8f.png
[CSS3 Loading Animation]: http://www.alessioatzeni.com/blog/css3-loading-animation/
[Demo 14]: http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/index.html
[Download 15]: http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/download/source.zip
[Loading Animation-jquery-plugins-4]: /images/20220824/eb4c8b996be141fa85c32b26196e00d4.png
[Beautiful CSS3 And jQuery progress Bar]: http://www.htmldrive.net/items/show/791/Very-Beautiful-CSS3-And-JQuery-progress-bar
[Demo 15]: http://www.htmldrive.net/items/demo/791/Very-Beautiful-CSS3-And-JQuery-progress-bar
[Download 16]: http://www.htmldrive.net/items/download/791
[Loading Animation-jquery-plugins-5]: /images/20220824/4c3439c5c27547b88c1ee84e7d08200a.png
[CSS3 Loading Animation Loop]: http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
[Demo 16]: http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html
[Download 17]: http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/download/source.zip
[Loading Animation-jquery-plugins-6]: /images/20220824/54a10e8291c64ba991ca79ca8eb20e63.png
[dwProgressBar]: http://davidwalsh.name/progress-bar-animated-mootools
[Demo 17]: http://davidwalsh.name/demo/progress-bar.php
[Download 18]: http://davidwalsh.name/demo/dwProgressBar.js
[Loading Animation-jquery-plugins-7]: /images/20220824/5f00656c248d4bf2bbd4cd3ea2cf32ec.png
[Pure CSS Progress Bar]: http://ivan.ly/
[Download 19]: http://www.smashingapps.com/2014/02/24/jqueryloadingplugins27
[Loading Animation-jquery-plugins-8]: /images/20220824/3e18576e372141609edefc7fae433f27.png
[Smooth Progress Bar Loading Effect]: http://www.jqueryscript.net/loading/Smooth-Progress-Bar-Loading-Effect-With-jQuery.html
[Demo 18]: http://www.jqueryscript.net/demo/Smooth-Progress-Bar-Loading-Effect-With-jQuery
[Download 20]: http://www.jqueryscript.net/download/Smooth-Progress-Bar-Loading-Effect-With-jQuery.zip
[Loading Animation-jquery-plugins-9]: /images/20220824/7fc9a16a571b412a834022d7270b28ea.png
[Animated Skills Diagram with Raphael]: http://tympanus.net/codrops/2011/04/22/animated-skills-diagram/
[Demo 19]: http://tympanus.net/Tutorials/AnimatedSkillsDiagram/
[Download 21]: http://tympanus.net/Tutorials/AnimatedSkillsDiagram/AnimatedSkillsDiagram.zip
[Loading Animation-jquery-plugins-10]: /images/20220824/3ff86c416a4d49bf97e94d9121b91af8.png
[Creating _ Styling Progress Bar With HTML5]: http://www.hongkiat.com/blog/html5-progress-bar/
[Demo 20]: http://demo.hongkiat.com/html5-progress-bar/
[Download 22]: http://demo.hongkiat.com/html5-progress-bar/source.zip
[Loading Animation-jquery-plugins-11]: /images/20220824/d796c649145a4cfc8b83c8e553e69780.png
[Ajax Style Loading Animation]: http://www.htmldrive.net/items/show/510/Ajax-Style-Loading-Animation-in-CSS3-no-Images-.html
[Demo 21]: http://www.htmldrive.net/items/demo/510/Ajax-Style-Loading-Animation-in-CSS3-no-Images-
[Download 23]: http://www.htmldrive.net/items/download/510
[Loading Animation-jquery-plugins-27]: /images/20220824/8a13d1eec72348e1b0712faaa3a2bc5d.png
[Animated Progress Bar 1]: http://cssdeck.com/labs/animated-progress-bar
[Loading Animation-jquery-plugins-28]: /images/20220824/886c56396f1b422bb353c9460098d07d.png
[jQuery Ajax Loading Overlay with Loading Text]: http://www.jqueryscript.net/loading/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.html
[Demo 22]: http://www.jqueryscript.net/demo/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin/demo
[Download 24]: http://www.jqueryscript.net/download/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.zip
[Loading Animation-jquery-plugins-30]: /images/20220824/26d816fc741f4638b574b622e7fe6900.png
[dizyne]: http://dizyne.net/30-jquery-css3-loading-animation-progress-bar-plugins/
[Link 1]: http://www.oschina.net/p/jquery
[Link 2]: http://www.oschina.net/action/project/go?id=125&p=download
[Link 3]: http://www.oschina.net/app
[http_www.oschina.net]: http://www.oschina.net/
[http_www.oschina.net_news_49287_30-jquery-css3-loading-animation-progress-bar-plugins]: http://www.oschina.net/news/49287/30-jquery-css3-loading-animation-progress-bar-plugins