CSS實現進度條

進度條常常運用於網頁，即便咱們意識到不是全部的東西都將瞬間被加載完成，這些進度條用於提醒使用者關於網頁上具體的任務進程，譬如上傳，下載，加載應用程序等。

之前若是想要建立一個進度條的動畫效果，沒有使用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; animation:progressbar 7s infinite }

改變進度條的樣式，咱們須要添加Webkit和Mozilla的僞類，使谷歌瀏覽器和火狐瀏覽器兼容。

progress::-webkit-progress-bar { /* style rules for Chrome */ } progress::-moz-progress-bar { /* style rules for Firefox*/ } 

爲了完成HTML5進度條的設計，我想出了下面的CSS。

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; animation:progressbar 7s infinite }

如今，使用咱們第一個例子中的的@keyframe，你將獲得類似的結果，以下圖所示。 注意：請查看此頁關於支持HTML5的進度條的瀏覽器。

本文根據@Sam Norton的《How to create a CSS3 progress bar》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://www.developerdrive.com/2015/05/how-to-create-a-css3-progress-bar/。