在很多項目中我們前端頁面要用到行內的進度條展示一些數據百分比和進度之類的樣式。
例如下圖：訂單的時段分析
我們想使用更直觀的方式去體現比例值或者進度，那麼在不用js組件的情況下，我們是如何用兩個span標籤加上幾行css搞定的呢？
讓小木來告訴你，程序員做前端很容易，進度條這種組件，簡單的就是兩個分層而已，一層顏色顯示總體長度，上層顏色顯示當前進度比例值，顏色一區分，效果就出來了。
先看看代碼，第一層class=“percent”是一個長度爲100px的span 給一個底色
再看上層的綠色進度部分 class="inner" 長度是一個不確定的值 比例是多少 長度就是多少 這樣就能體現出百分比效果了。
按照這樣的思路 各位可以實現自己的簡單進度顯示了，如果想要更高級，可以配合css3動畫或者js 進行升級，程序員輕鬆應對前端，很easy！；