進度條經常運用於網頁，即使我們意識到不是所有的東西都將瞬間被加載完成，這些進度條用於提醒使用者關於網頁上具體的任務進程，譬如上傳，下載，加載應用程序等。
以前如果想要創建一個進度條的動畫效果，沒有使用JavaScript是不可能實現的。然而感謝CSS3的出現，我們現在能夠在div里執行動畫，添加梯度和彩色元素。事實上，HTML5為實現此目的也創建了一個特殊的進度條元素。 當你看完這個教程，你將會知道怎樣使用純CSS創建一個有平面動畫效果的進度條：無需Flash，無需圖片，無需JavaScript。
讓我們開始吧...
標簽
我們應該寫一個樣式為.container的div用來包含我們的進度條，其次是用樣式為.title的div來包裹我們的標題。
接下來，我們將添加樣式為.bar的div來包含填充和未填充的進度條樣式。最后，我們將在.bar里添加樣式為.bar-unfill 和 .bar-fill 的span標簽。
<div class="container"> <div class="title plain">Plain</div> <div class="bar"> <span class="bar-unfill"> <span class="bar-fill"></span> </span> </div> </div> 簡單的進度條的CSS代碼
.container類里將width定義為30%使進度條能夠自適應。我們也將放一些簡單的border-radius之類的屬性在我們的.title類里以修改頂部和底部的左邊的邊框弧度，創建一個簡單明了的平板式設計。
.container { width:30%; margin:0 auto } .title { background:#545965; color:#fff; padding:15px; float:left; position:relative; -webkit-border-top-left-radius:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius:5px; border-bottom-left-radius:5px }現在讓我們來寫未填充的的樣式，首先給他一個白色的背景。
.bar-unfill { height:15px; display:block; background:#fff; width:100%; border-radius:8px }接下來，我們將定義進度條的樣式，先令他的寬度為100%，因為這也會應用於定義和未定義的部分。所以在我們的.bar-fill的類里，我們將令他的寬度為0作為起始的寬度，添加CSS3的transition屬性使我們的動畫效果更加流暢，最后，我們將添加CSS3里的animation屬性，定義動畫的名字，和duration和 animation-iteration-count 屬性。
.bar-fill { height:15px; display:block; background:#45c9a5; width:0; border-radius:8px; -webkit-transition:width .8s ease; -moz-transition:width .8s ease; transition:width .8s ease; -webkit-animation:progressbar 7s infinite; animation:progressbar 7s infinite }制作這個動畫，我們將使用CSS3里的@keyframe規則來設置寬度從0變化到100%。你也能定制你自己喜歡的變化。
/* Chrome, Safari, Opera */ @-webkit-keyframes progressbar { from { width:0 } to { width:100% } } /* Standard syntax */ @keyframes progressbar { from { width:0 } to { width:100% } } 條紋進度條
若要制作一個條紋進度條，我們應該把.bar-fill重新命名為.bar-fill-stripes。我們將使用backgrou-image屬性里的 linear-gradient同時聲明它的顏色。剩余的CSS3動畫效果也是和上述相同，看下面的代碼：
.bar-fill-stripes { height:15px; display:block; background:#e74c3c; width:0; border-radius:8px; background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); -webkit-transition:width .8s ease; -moz-transition:width .8s ease; transition:width .8s ease; -webkit-animation:progressbar 7s infinite; animation:progressbar 7s infinite }有追蹤器的進度條
本教程的這部分，我們將為我們的進度條創建一個跟蹤器，所以我們將調整一下我們的HTML標簽和CSS部分，觀察下面的標簽。
<div class="container"> <div class="title">Tracker</div> <div class="bar"> <span class="bar-unfill"> <span class="bar-fill-tracker"></span> <span class="track-wrap"> <span class="track"></span> </span> </span> </div> </div> 正如你所看到的那樣，我們往類名為.bar-unfill的div里添加了一個類名為.track-weap的span標簽。他將包裹我們整個追蹤器，然后使用另一個@keyframe規則來產生動畫效果，讓我們一起寫一下.track-wrap和.track的樣式吧。
.track-wrap { position:relative; top:-18px; -webkit-animation:progressbar2 7s infinite; animation:progressbar2 7s infinite } .track { height:20px; display:block; background:#e74c3c; width:20px; border-radius:10px; position:relative; left:-12px } /* Chrome, Safari, Opera */ @-webkit-keyframes progressbar2 { from { left:0 } to { left:100% } } /* Standard syntax */ @keyframes progressbar2 { from { left:0 } to { left:100% } } 正如上面所示，我在.track-wrap類里設置了position為relative，top改為-18px，然后設置一個animation屬性。接下來，我設置了追蹤器的.track類，並且設置border-radius為10px，left為-12px。另一方面我也通過重新命名為progressbar2的@kyframe添加了動畫效果。
HTML5 的進度條
在我們之前的例子里，我們都是使用div來創建一個進度條，但是這次我們將研究如何使用HTML5的進度條。
基礎標簽
HTML5進度條元素可以通過<progress>標簽被添加，在這個標簽里面，我們可以設置進度條的各種參數，如value、min、max等屬性。請觀察下面的基礎標簽。
<progress value="50" max="100"></progress> 現在將這些元素排成一列，我們可以用上述的便簽將這些代碼包裹起來，請看下面的代碼。
<div class="title html5">HTML5</div> <div class="bar"> <span class="bar-unfill"> <progress value="50" max="100"></progress> </span> </div> 沒有什么特別之處，我們只是改變了類名為bar-fill的span標簽里的進度條標簽。現在讓我們試試HTML5的進度條。
progress, progress::-webkit-progress-bar{ height:15px; display:block; background-color:#8e44ad; width:0; -webkit-border-radius: 8px; border-radius:8px; color: #fff; -webkit-transition:width .8s ease; -moz-transition:width .8s ease; transition:width .8s ease; -webkit-animation:progressbar 7s infinite; animation:progressbar 7s infinite } progress::-moz-progress-bar { height:15px; display:block; background-color:#8e44ad; width:0; -webkit-border-radius: 8px; border-radius:8px; color: #fff; -webkit-transition:width .8s ease; -moz-transition:width .8s ease; transition:width .8s ease; -webkit-animation:progressbar 7s infinite;