進(jìn)度條是基礎的界面控件，可用于多種場(chǎng)合，比如任務(wù)完成進(jìn)度，手機充電狀態(tài)等。
本文介紹一個(gè)簡(jiǎn)單實(shí)用的進(jìn)度條制作方法。預期效果如下圖所示：
直觀(guān)上，我們可以把該進(jìn)度條控件分為2個(gè)部分，外部的邊界用來(lái)表示固定的目標范圍，里面的條形部分用來(lái)表示當前進(jìn)度。
外部目標范圍元素的CSS代碼編寫(xiě)如下：
1 2 3 4 5 6 7 8 9 10 11 | .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%; } |
內部條形元素邊界的弧度需要和外部范圍元素的保持一致，可以使用繼承的方式：
1 2 3 4 5 6 7 | .pb-scope .pb-bar { display: block; width: 70%; height: 100%; border-radius: inherit; background: #A157FC; } |
上述border-radius屬性使用inherit值，以保持和其父樣式類(lèi)相同的半徑。
具體使用時(shí)的HTML代碼示例如下：
1 2 3 | <span class="pb-glass"> <span class="pb-bar"></span></span> |
如果需要顯示進(jìn)度條動(dòng)畫(huà)，只要給內部bar元素添加animation即可。
一個(gè)完整的在線(xiàn)實(shí)例可以訪(fǎng)問(wèn)：http://wow.techbrood.com/fiddle/17885
聯(lián)系客服
