現在的web已經不是以前的web了，傳輸更大的資料量，有著更加複雜的計算，這就需要利用進度條來提高使用者體驗，必要時可以讓使用者耐心等待，不至於因操作卡了而關掉你的網頁。前幾天我在網上看到一款和一般進度條不太一樣的玩意，它的外觀是一條直線，末端有個小球，在進度變化時可以顯示數字百分比，更可以用不同顏色來表示當前進度的狀態。來看看效果圖。
一看進度條外觀，還不錯吧。
同時，我們也可以在這裡看到進度條的demo演示
接下來我們來分析一下這款html5進度條的實現原始碼，篇幅有限，我們只挑核心的**來說。
html**很簡單，構造乙個進度條容器和數字百分比容器：
<首先我們來對進度條的容器進行樣式渲染，利用css3的漸變屬性來實現不同進度變換顏色的效果：div
id>
<
div
class
="loader-container"
>
<
div
class
="meter"
>0
div>
<
span
class
="runner"
>
span
>
div>
div>
.loader-container .loader-container:after接下來是末端小圓球的樣式：
.loader-container.done:after .run .runner這裡也是利用的css3的漸變屬性。
然後是數字百分比的樣式屬性，這裡隨著進度變化，數字百分比的顏色也會發生變化。、
.meter .meter:after最後，我們再來看看js**，其實js要完成的工作非常簡單，只需要將css3渲染好的進度條動起來就好，看**：
var loader = function()
else
};return
;
var time = options.time ? options.time : 0,
interval = time/100;
loader.classlist.add('run');
k =window.setinterval(counter, interval);
settimeout(
function
() , time);
},}}();
loader.init();
css3 實現進度條
首先圓圈進度條是一直在旋轉的，旋轉我們可以利用的是css3的rotate deg 實現乙個二維旋轉的css3屬性，作用是將指定元素旋轉指定的角度,正值表示順時針方向旋轉，負值表示逆時針防線旋轉，旋轉的角度範圍為 360deg 360deg 一般的進度條的是長這樣的 這可以看成是乙個圓弧在一直旋轉，h...
CSS3實現動態進度條
css3的線性漸變使製造動態進度條成為可能。現在就來一步一步講解如何建立動態進度條吧。以chrome瀏覽器webkit核心為例。目標進度條，背景是淡藍色，上面平鋪了一層傾斜的深藍色條狀矩形。我們可以這樣寫 box box 這裡用到了線性漸變 webkit linear gradient 逆時針傾斜的...
css3 製作圓環進度條
移動端做乙個 loadiing 載入的圖示，跟以往沿用的都不太一樣，是乙個圓環進度條，圓環進度條也就罷了，還得能用百分比控制。demo 剛開始寫這個圓環的時候是參照帖子上給出的css 代入，然後根據自己的需求改，發現圓環可以完美轉動了，但是好像沒法用百分比控制，所以放棄了隨便copy乙個現成的想法，...