atitit.loading的设计与实现控件选型attilax 总结

atitit.loading的设计与实现控件选型attilax 总结

1. Percentage Loader（推荐） 1

1.1. 起始百分比：：调整  progress 1

2. CSS3 Loading Spinners Without Images 2

2.1.1. CSS Transforms 2

2.1.2. Animation 3

3. Ajax Style Loading Animation in CSS3 ( no Images ) 3

4. PageLoading - jQuery plugin 5

5. Edit fiddle - JSFiddle.htm 5

6. jQuery Circular Progress Bar 5

7. jQuery Progress Bar 6

8. 参考 6

1. Percentage Loader（推荐）

一款轻量的 jQuery 进度条插件，以百分比的形式呈现加载进度，同时显示已加载的内容大小。

1.1. 起始百分比：：调整  progress

var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.01, onProgressUpdate : function(val) {

var totalKb = 3000;  ///  more bit more time

作者:: 老哇的爪子 Attilax 艾龙，  EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

2. CSS3 Loading Spinners Without Images

2.0.1. CSS Transforms

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:

transform:rotate(45deg) translate(0, -35px);

If you rotate first, and then translate (move), it will move along the rotated axis. The above code translates a block to the top-right corner (45 degrees). (the gray div is not transformed while the black one is.)

Using this, I could rotate and translate a bunch of divs to create loading spinners (though this one doesn’t spin yet!):

In this example, each div is rotated an additional 45 degrees. The first one is not rotated, the second one is rotated 45 degrees, the one after that 90 degrees, and so forth. Additionally, each div has increased opacity to make it look like most loading spinners.

2.0.2. Animation

Webkit supports CSS animations, but these are continuous while most loading spinners are not. On the left side is a spinner animated with CSS animation (only works in Safari and Chrome), on the right there’s one animated with a small bit of JavaScript to look like regular loading spinners:

The code for the CSS animation is fa

3. Ajax Style Loading Animation in CSS3 ( no Images )

Facebook style

HTML

<div id='facebook' >             <div id='block_1' class='facebook_block'></div>             <div id='block_2' class='facebook_block'></div>             <div id='block_3' class='facebook_block'></div></div>

CSS

#facebook{ margin-top:30px; float:left;}.facebook_block{
background-color:#9FC0FF; border:2px solid #3B5998; float:left; height:30px; margin-left:5px; width:8px;        opacity:0.1; -webkit-transform:scale(0.7); -webkit-animation-name: facebook;  -webkit-animation-duration: 1s;  -webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: linear; }#block_1{  -webkit-animation-delay: .3s; }#block_2{ 
-webkit-animation-delay: .4s;}#block_3{  -webkit-animation-delay: .5s;}@-webkit-keyframes facebook{
0%{-webkit-transform: scale(1.2);opacity:1;} 100%{-webkit-transform: scale(0.7);opacity:0.1;}}

4. PageLoading - jQuery plugin

5. Edit fiddle - JSFiddle.htm

6. jQuery Circular Progress Bar

这款环形进度条加载插件可以非常灵活的定制外观、加载速度以及设置特定的进度值。

源码下载    在线演示

7. jQuery Progress Bar

一款非常简单的百分比进度条插件，可以参数灵活的控制百分比的增减，有动画效果。

源码下载    在线演示

8. 参考

Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me.htm

10个漂亮的CSS3+jQuery的Loading加载条动画设计插件 - JavaScript - 酷站代码.htm

8款效果精美的 jQuery 加载动画和进度条插件 - 梦想天空（山边小溪） - 博客园.htm

8款效果精美的 jQuery 加载动画和进度条插件 - 梦想天空（山边小溪） - 博客园.htm