超酷jQuery進度條載入動畫集合

在豐富多彩的網頁世界中，進度條載入動畫的形式非常多樣，有利用gif圖片實現的loading動畫，也有利用jQuery和CSS3實現的進度載入動畫，本文主要向大家介紹很多jQuery和CSS3實現的進度條載入動畫，每一個都非常具有創意。如果你喜歡，可以下載原始碼並將它們應用到自己的網站中去。

HTML5/CSS3粒子效果進度條

這款進度條很有特點，進度條在變化的時候出現粒子飛灑的動畫效果。另外這款進度條只是演示了進度播放的效果，具體進度值需要開發者自己用程式碼控制。

DEMO演示 原始碼下載

HTML5 Canvas發光Loading動畫

和上面一款不同的是，它是一個Loading載入動畫，並不能實現具體進度的載入，但是可以提示使用者資料或者頁面正在載入。並且該應用利用Canvas繪製動畫，效果非常不錯。

DEMO演示 原始碼下載

jQuery/CSS3 Loading進度條載入動畫特效

這也是一款利用CSS3和jQuery實現的進度條外掛，一共有3種進度條動畫風格，尤其在黑色的背景下，這幾款進度條動畫顯得更為立體動感。

DEMO演示 原始碼下載

jQuery自定義Loading動畫外掛

這是一款純jQuery實現的Loading動畫，特點在於它可以自定義Loading動畫的很多引數，包括大小、旋轉速度等。配置完的Loading動畫就可以應用到自己的網頁中去了。

DEMO演示 原始碼下載

jQuery實時動畫進度條

這款jQuery進度條外掛的最大特點是可以實時顯示進度條的進度值，可以應用在檔案上傳下載等比較定量的操作中。另外你也可以定義進度條的步長，也就是沒單位進度移動的距離。

DEMO演示 原始碼下載

CSS3不同進度顏色的進度條

這又是一款風格迥異的CSS3進度條應用，它有點類似於遊戲人物中的生命值，隨著數值的變化進度條會產生不同的背景顏色，這裡只是設定了幾個固定的進度比例，你也可以指定自己的進度範圍。

DEMO演示 原始碼下載

這些進度條都很精彩，特別是都帶有原始碼，你可以很方便地使用它們，jQuery和CSS3都很強大。

本文作者：碼農網 – 小峰