在很多項(xiàng)目中我們前端頁面（也包括小程序）要用到行內(nèi)的進(jìn)度條展示一些數(shù)據(jù)百分比和進(jìn)度之類的樣式。

例如下圖：訂單的時(shí)段分析

我們想使用更直觀的方式去體現(xiàn)比例值或者進(jìn)度，那么在不用js組件的情況下，我們是如何用兩個(gè)span標(biāo)簽加上幾行css搞定的呢？

程序員做前端很容易，進(jìn)度條這種組件，簡單的就是兩個(gè)分層而已，一層顏色顯示總體長度，上層顏色顯示當(dāng)前進(jìn)度比例值，顏色一區(qū)分，效果就出來了。

先看看代碼，第一層class=“percent”是一個(gè)長度為100px的span 給一個(gè)底色

再看上層的綠色進(jìn)度部分 class=”inner” 長度是一個(gè)不確定的值 比例是多少 長度就是多少 這樣就能體現(xiàn)出百分比效果了。

按照這樣的思路 各位可以實(shí)現(xiàn)自己的簡單進(jìn)度顯示了，如果想要更高級，可以配合css3動畫或者js 進(jìn)行升級，程序員輕松應(yīng)對前端，很easy！；