上圖是我們常見的loading進度條，以前都是用一張背景圖片平鋪的。其實如果拋去兼容性因素，我們可以用零圖片純樣式來實現。
一，首先，我們先為容器定義一個純藍色背景：
box{ padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft Yahei", Simsun; font-size: 17px;">二，繪制條紋。
我們可以用linear-gradient來繪制條紋。在本例中，可以用半透明的白色背景來實現。
繪制條紋
box{background-image:linear-gradient(rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}
這樣就形成了四等分的條紋，但這顯然不是我們想要的結果。
三，設定傾斜角度。
linear-gradient是可以設定傾斜角度的。
box{background-image:linear-gradient(45deg, rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}
這樣貌似達到了我們的預期？其實不是的，現在是無論進度條有多寬，都是百分百填充，視覺上看到的都是四等分。當寬度變短時，同樣是四等分，只是每一份都變窄了。
四，設置固定尺寸
我們可以將原來背景圖的相對寬度變成純對尺寸。通過background-size來實現
box{background-size:40px 40px}// 這里的值視實際情況而定。
這樣，無論進度條寬度發生任何變化，都不會影響斑馬條紋了。
如果想看實際的線上效果，狠戳 http://loading.io/
另外，轉載一篇瑤姐的關於backgound的文章：http://blog.doyoe.com/2016/04/11/css/background系列之無處不在的妙趣/#more
其實，只要敢於打破常規，腦洞大開，就可以寫出優雅，健壯，適應性強的代碼。