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