現在，gif 格式的進度條已經越來越少，css 進度條如雨後春筍般湧現。css3的崛起，更使得動態效果得以輕鬆實現，未來，必定是css3的天下，所以今天我就來分享一下幾個常見的css3進度條loading動畫。
首先，我們來看一下大概要講的幾種進度條都長啥樣：
現在開始，來講一下各進度條的做法：
第乙個進度條，
先上**：
<可以看到，要想實現這個進度條動畫，所需的html結構非常簡單，那麼css部分呢？div
id="caseverte"
>
<
div
id="case1"
>
div>
<
div
id="case2"
>
div>
<
div
id="case3"
>
div>
<
div
id="case4"
>
div>
<
div
id="case5"
>
div>
<
div
id="case6"
>
div>
<
div
id="load"
>
<
p>loading ...
p>
div>
div>
<我們將**拆分一下：style
>
body
div
#caseverte
#caseverte #load
#caseverte #case1
@keyframes case1
50%
100%
} #caseverte #case2
@keyframes case2
50%
100%
} #caseverte #case3
@keyframes case3
50%
100%
} #caseverte #case4
@keyframes case4
50%
100%
} #caseverte #case5
@keyframes case5
50%
100%
} #caseverte #case6
@keyframes case6
50%
100%
}
style
>
第一步，先設定一下body的背景顏色，再給所有的div設定乙個外邊距，使得每個div之間產生一定布局距離。
body第二步，我們開始寫進度條的容器，以及對loading文字部分進行處理,都是基本樣式，沒什麼可說的。div
#caseverte第三步，開始處理進度條中長度節奏變化的矩形，這裡我們使用css裡面的動畫屬性，設定關鍵幀@keyframes在不同進度寬度不同。#caseverte #load
#caseverte #case1最後，通過上邊的**我們已經做好了該進度條動畫的第乙個動畫塊，後面要做的就是複製貼上，給每乙個動畫塊加上動畫屬性，並調整具體屬性值，如矩形的寬度、動畫時間，通過瀏覽器檢視效果，調整到滿意為止即可。@keyframes case1
50%
100%
}
這樣，我們的第乙個css3進度條loading動畫就做完了，來感受一下：
第乙個進度條動畫會做了，第二個是不是也會做了？改一下顏色就行了，第七個是不是也很容易？把動畫中寬度的變化改為高度的變化就ok了~~
那麼，今天就先分享這麼多！
css3 實現進度條
首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate deg 實現乙個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍為 360deg 360deg 一般的進度條的是長這樣的 這可以看成是乙個圓弧在一直旋轉，h...
CSS3實現動態進度條
css3的線性漸變使製造動態進度條成為可能。現在就來一步一步講解如何建立動態進度條吧。以chrome瀏覽器webkit核心為例。目標進度條，背景是淡藍色，上面平鋪了一層傾斜的深藍色條狀矩形。我們可以這樣寫 box box 這裡用到了線性漸變 webkit linear gradient 逆時針傾斜的...
css3 製作圓環進度條
移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...