純css實現進度條效果

乙個完整的進度條效果其實可以拆分一下：

一段背景；

一小段的靜態的斜紋進度條；

斜紋進度條用線性漸變 linear-gradient 類實現，原理很好理解，2個引數：

1、角度；

2、關鍵點（包含2個引數，1是顏色，2是長度位置）

這是最基礎的漸變，構造了乙個100px*100px的正方形，漸變角度為0（從下到上），關鍵點a顏色#f10，開始長度為0px，關鍵b顏色#ddd，開始長度為50px，長度為 點a到點b的長度差（50px）的這一段 就是漸變區域，點b到末尾就是純點b的顏色#ddd的區域，即上圖的漸變其實有個隱藏的關鍵點c顏色#ddd，開始長度為100px，上圖的線性漸變完整的寫法是：

background-image: linear-gradient(0, #f10 0px, #ddd 50px, #ddd 100px);

linear-gradient(60deg, transparent 0, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);

0~0.8rem是第一段漸變區域，由於2個關鍵點的顏色相同（transparent是透明的，即顏色由背景決定），所以這一段漸變區域 在忽略漸變角度的情況下 其實是純色的的長度為0.8rem的長方形；

0.8rem~0.8rem是第二段漸變區域，由於2個關鍵點的長度位置相同，所以即便2個關鍵點的顏色不同，但是這一段漸變區域的長度為 2個關鍵點的長度位置的差值 即0，等於沒有任何漸變效果；

0.8rem~1.6rem……同理。

那麼就構造出了這麼一段靜態的進度條，我們只需要乙個無限迴圈的動畫不斷控制background-position水平移動，就可以寫出乙個進度條的效果。

附上源**：

1

doctype html
>
2<
head
>
3<
meta 
charset
="utf-8"
>
4<
title
>process
title
>
5<
style
>
6html 
9.bg_fff 
1219
2634
4258
6970
/*動畫 
*/71
@-webkit-keyframes process 
73100% 74}
75@keyframes process 
77100% 78}
79style
>
80head
>
81<
body
>
82<
div 
class
>
83<
div 
class
="xui-maincontain pt10 bg_fff"
>
84<
div 
class
="xui-returncommission"
>
85<
div 
class
="xui-process"
>
86<
i id
="icon-flag"
class
="xui-icon-flag"
>
i>
87<
div 
class
="xui-process-static"
>
div>
88<
div 
id="process-bar"
class
="xui-process-active"
>
div>
89div
>
90div
>
91div
>
92div
>
93<
script
>94(
function
(hasget, totalget) 
101flag.style.left 
=(widthpercentage-1
) +'%
';102processbar.style.width 
=widthpercentage +'
%';103
if(widthpercentage ==0
) 106
})(10
, 20
);107
script
>
108body
>
109html
>

純css實現進度條效果

乙個完整的進度條效果其實可以拆分一下 一段背景 一小段的靜態的斜紋進度條 斜紋進度條用線性漸變 linear gradient 類實現，原理很好理解，2個引數 1 角度 2 關鍵點 包含2個引數，1是顏色，2是長度位置 display inline block width 100px height ...

純css實現進度條效果

乙個完整的進度條效果其實可以拆分一下 一段背景 一小段的靜態的斜紋進度條 斜紋進度條用線性漸變 linear gradient 類實現，原理很好理解，2個引數 1 角度 2 關鍵點 包含2個引數，1是顏色，2是長度位置 這是最基礎的漸變，構造了乙個100px 100px的正方形，漸變角度為0 從下到...

實現進度條效果

html5 中可以使用progress標記元素實現進度條效果。progress是html5中新增的狀態互動元素，用來表示頁面中的某個任務完成的進度。展示進度條的效果可以使用整數，也可以使用百分比。屬性資訊 max 定義完成的值 value 定義程序的當前值 瀏覽器支援 chrome，firefox,...