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

這款環(huán)形進度條加載插件可以非常靈活的定制外觀、加載速度以及設置特定的進度值。

源碼下載????在線演示

?

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

總結

以上是生活随笔為你收集整理的atitit.loading的设计与实现控件选型attilax 总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。