純css實現進度條效果

2021-07-28 09:01:57 字數 2750 閱讀 5453

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

一段背景;

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

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

1、角度;

2、關鍵點(包含2個引數,1是顏色,2是長度位置)

display: inline-block;

width: 100px;

height: 100px;

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

這是最基礎的漸變,構造了乙個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);
漸變角度為60度;

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是長度位置 這是最基礎的漸變,構造了乙個100px 100px的正方形,漸變角度為0 從下到...

純css實現進度條效果

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

實現進度條效果

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