10個基于CSS3/jQuery的加載動畫設計方案
過去，由于加載圖片的格式限制(只能使用GIF格式)，設計加載動畫不是那么容易。隨著技術和瀏覽器的發(fā)展，用 CSS3 和 jQuery 就可以方便地設計加載動畫，這種方式的高度可定制化以及服務器的進步使得開發(fā)者的各種要求得到滿足。下面介紹10個實用的方案。
1. Sonic——循環(huán)的加載動畫
Sonic是一個很小的JS“類”，你可以用它來創(chuàng)建自定義加載動畫——蛇吞尾似的循環(huán)動畫。
2. 閃爍的加載動畫
用 CSS3 動畫可以實現(xiàn)閃爍跳躍式的正在載入頁面效果。
3. 旋轉的加載動畫(無需圖片)
CSS transform(Firefox 3.5+和基于Webkit的瀏覽器中可用)有很多有趣的功能，如旋轉、平移、縮放和傾斜等等都可以用來設計加載動畫。
4. Ajax 風格的加載動畫(無需圖片)
圖片是網(wǎng)站中非常重要的部分，如果使用gif圖片作為加載動畫，則需要在載入網(wǎng)站圖片的同時先載入gif動畫圖片。如果使用 CSS，這種問題就迎刃而解了。因此推薦用 CSS3 來開發(fā) Ajax 風格的加載動畫。
5. 圓圈風格的加載動畫
簡潔的 CSS3 代碼能生成動畫來顯示加載進度，在樣式類中修改寬度和高度值就可以設置圓圈的大小。
6. Flickr風格的加載動畫
頁面加載時，兩個不同顏色的圓圈分別向左向右移動，之后再反向移動，一直重復循環(huán)。
7. Canvas元素加載生成器
這是一個免費的在線工具，可以為HTML項目生成各種加載動畫，包含旋轉和閃爍的效果。
8. CSS3 加載動畫
三個簡單的 CSS3 加載動畫，分別以圓點、線條、方格的形式呈現(xiàn)。
9. CSS3 循環(huán)加載動畫
三個 CSS3 循環(huán)動畫，可以應用于許多領域，例如基于 jQuery 的圖像預載。
10. 頁面加載——jQuery 插件
這個jQuery插件能夠在加載網(wǎng)頁的時候顯示加載進度視圖，還可以自定義一些參數(shù)來設置該視圖的顏色、加載圖標、背景圖片等等。
原文：http://www.iteye.com/news/24390
【編輯推薦】
