學習使用CSS做進度條

進度條是基礎的界面控件，可用於多種場合，比如任務完成進度，手機充電狀態等。

本文介紹一個簡單實用的進度條製作方法。預期效果如下圖所示：

直觀上，我們可以把該進度條控件分爲2個部分，外部的邊界用來表示固定的目標範圍，裏面的條形部分用來表示當前進度。

外部目標範圍元素的CSS代碼編寫如下：

.pb-scope {
    display: inline-block;
    width: 100px;
    height: 20px;
    padding: 2px;
    border: 4px solid #A157FC;
    border-top-left-radius: 10% 50%;
    border-top-right-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
    border-bottom-right-radius: 10% 50%;
}

內部條形元素邊界的弧度需要和外部範圍元素的保持一致，可以使用繼承的方式：

.pb-scope .pb-bar {
    display: block;
    width: 70%;
    height: 100%;
    border-radius: inherit;
    background: #A157FC;
}

具體使用時的HTML代碼示例如下：

<span class="pb-glass"><span class="pb-bar"></span></span>

如果需要顯示進度條動畫，只要給內部bar元素添加animation即可。

一個完整的在線實例可以訪問：http://wow.techbrood.com/fiddle/17885

by iefreer