效果圖如下：
第一種姿勢如下
先上**
/*對應css*/
#progress
#progress span
@keyframes load
100%
}上方的漸變色使用了css3中的 linear-gradient
linear-gradient語法
= linear-gradient([ [ | to ] ,]? [, ]+)
= [left | right] || [top | bottom]
= [ | ]?
栗子：.test1
.test2
.test3
.test4
效果圖：
動畫通過keyframes來實現，通過改變span的寬度來實現進度的效果，素不素hin簡單？！
現在的進度條效果是只有70%的效果，只要改變width的值就可以啦，就像下圖，一致改成某個值即可。
第二種姿勢
首先，構造好乙個正方形的div，將這個正方形對稱分成左右兩塊，如下
這裡構造的是乙個200px 200px的乙個正方形，分成兩塊100px200px的矩形。
.progress2
.rect
.right
.left
如下效果
接下來，在每一塊矩形中再構造乙個空心圓，先構造右半邊，如下
>
.circle
.rightcircle
會看到下面的效果
由於在class：rect中，將overflow設定成了hidden，使得溢位的部分被遮蓋了，之後的效果實現與這個屬性關係也緊密相連。
如果沒有設定該屬性，效果就是這樣的。
那會發現有一部分被蓋住了，我們在使他旋轉45度即可
.circle
效果如下
我們實現動畫效果的方式就是讓右半邊旋轉180度，然後左半邊旋轉180度，湊成完整的效果。
先給這右半邊設定動畫效果，即一開始讓其旋轉45度，然後旋轉180度，由於這只是右半邊，所以在50%的時候就應該旋轉完畢，之後一直保持不變。
.rightcircle
@keyframes load_right
50%100%
}這是沒有在class rect中設定overflow：hidden的效果
這是在class rect中設定了overflow：hidden的效果
現在，我們就可以把左半邊也湊上了，同理，動畫效果一開始先旋轉45度，調正，然後一直保持不變，到50%之後，再開始旋轉180度。這樣就與右半邊銜接上了。
.leftcircle
@keyframes load_left
50%100%
}這是整體的效果
可以調整角度或者調整顏色即可實現反向的效果。
我是調整了顏色就可以得到最開始的動畫效果啦,下面是完整的**
.progress2
.rect
.right
.left
.circle
.rightcircle
.leftcircle
@keyframes load_right
50%100%
}@keyframes load_left
50%100%}總結
css3 實現進度條
首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate deg 實現乙個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍為 360deg 360deg 一般的進度條的是長這樣的 這可以看成是乙個圓弧在一直旋轉，h...
兩種CSS3圓環進度條詳解
晚上睡覺之前，我抽了1個多小時，研究了一下圓環進度條，結合從網上查閱的資料，我終於掌握了兩種圓環的生成方法。這次的效果就是單純的css3效果，也沒有寫具體的js，等以後有時間在好好整理一下吧 這種方法好處在於容易理解，只需要一層一層的巢狀，即可得到效果，但是實現起來較為繁瑣，html的結構也比較冗餘...
CSS3實現動態進度條
css3的線性漸變使製造動態進度條成為可能。現在就來一步一步講解如何建立動態進度條吧。以chrome瀏覽器webkit核心為例。目標進度條，背景是淡藍色，上面平鋪了一層傾斜的深藍色條狀矩形。我們可以這樣寫 box box 這裡用到了線性漸變 webkit linear gradient 逆時針傾斜的...