過(guò)去，由于加載圖片的格式限制(只能使用GIF格式)，設(shè)計(jì)加載動(dòng)畫(huà)不是那么容易。隨著技術(shù)和瀏覽器的發(fā)展，用 CSS3 和 jQuery 就可以方便地設(shè)計(jì)加載動(dòng)畫(huà)，這種方式的高度可定制化以及服務(wù)器的進(jìn)步使得開(kāi)發(fā)者的各種要求得到滿足。下面介紹10個(gè)實(shí)用的方案。

1. Sonic——循環(huán)的加載動(dòng)畫(huà)

Sonic是一個(gè)很小的JS“類”，你可以用它來(lái)創(chuàng)建自定義加載動(dòng)畫(huà)——蛇吞尾似的循環(huán)動(dòng)畫(huà)。 

源碼 / 演示 

2. 閃爍的加載動(dòng)畫(huà)

用 CSS3 動(dòng)畫(huà)可以實(shí)現(xiàn)閃爍跳躍式的正在載入頁(yè)面效果。 

源碼 / 演示 

3. 旋轉(zhuǎn)的加載動(dòng)畫(huà)(無(wú)需圖片)

CSS transform(Firefox 3.5+和基于Webkit的瀏覽器中可用)有很多有趣的功能，如旋轉(zhuǎn)、平移、縮放和傾斜等等都可以用來(lái)設(shè)計(jì)加載動(dòng)畫(huà)。 

源碼 + 演示 

4. Ajax 風(fēng)格的加載動(dòng)畫(huà)(無(wú)需圖片)

圖片是網(wǎng)站中非常重要的部分，如果使用gif圖片作為加載動(dòng)畫(huà)，則需要在載入網(wǎng)站圖片的同時(shí)先載入gif動(dòng)畫(huà)圖片。如果使用 CSS，這種問(wèn)題就迎刃而解了。因此推薦用 CSS3 來(lái)開(kāi)發(fā) Ajax 風(fēng)格的加載動(dòng)畫(huà)。 

源碼 / 演示 

5. 圓圈風(fēng)格的加載動(dòng)畫(huà)

簡(jiǎn)潔的 CSS3 代碼能生成動(dòng)畫(huà)來(lái)顯示加載進(jìn)度，在樣式類中修改寬度和高度值就可以設(shè)置圓圈的大小。 

源碼 / 演示 

6. Flickr風(fēng)格的加載動(dòng)畫(huà)

頁(yè)面加載時(shí)，兩個(gè)不同顏色的圓圈分別向左向右移動(dòng)，之后再反向移動(dòng)，一直重復(fù)循環(huán)。 

源碼 / 演示 

7. Canvas元素加載生成器

這是一個(gè)免費(fèi)的在線工具，可以為HTML項(xiàng)目生成各種加載動(dòng)畫(huà)，包含旋轉(zhuǎn)和閃爍的效果。 

源碼 + 演示 

8. CSS3 加載動(dòng)畫(huà)

三個(gè)簡(jiǎn)單的 CSS3 加載動(dòng)畫(huà)，分別以圓點(diǎn)、線條、方格的形式呈現(xiàn)。 

源碼 / 演示 

9. CSS3 循環(huán)加載動(dòng)畫(huà)

三個(gè) CSS3 循環(huán)動(dòng)畫(huà)，可以應(yīng)用于許多領(lǐng)域，例如基于 jQuery 的圖像預(yù)載。 

源碼 / 演示 

10. 頁(yè)面加載——jQuery 插件

這個(gè)jQuery插件能夠在加載網(wǎng)頁(yè)的時(shí)候顯示加載進(jìn)度視圖，還可以自定義一些參數(shù)來(lái)設(shè)置該視圖的顏色、加載圖標(biāo)、背景圖片等等。 

源碼 / 演示 

原文：http://www.iteye.com/news/24390

【編輯推薦】

1. 10條建議讓你創(chuàng)建更好的jQuery插件
2. 使用jQuery和CSS3實(shí)現(xiàn)的超炫3D畫(huà)廊特效
3. 前端必備：jQuery 1.7.1API手冊(cè)
4. 8款超贊的響應(yīng)式j(luò)Query幻燈片插件推薦
5. jQuery基本原理