独书先生 Menu

CSS:progress 样式,自定义animation进度条案列

需求分析:

等待加载网页,上传文件均需要进度条,初步选用HTML5 自带progress标签+JS定时器实现一个固定时间加载完成的进度条。

1.先看下原始进度条:

HTML:

<progress  id="load" ></progress>

未加任何样式,进度条在左右跳动,可用作持续加载文件或网页。

2.设置加载完成(0~100)进度条到头后即停止的效果,需写JS

HTML:

<progress max="100" value="0" id="load" ></progress>

CSS:

progress{
background:green;
border:1px solid #000;
appearance: none;/*设置iOS下清除灰色背景*/
-webkit-appearance: none;
}

/*设置进度条颜色*/
::-ms-fill{
background:red;
}
::-moz-progress-bar{
background:red;
}
::-webkit-progress-value{
background:red;
}

/*设置进度条背景颜色*/
::-webkit-progress-bar{
background:green;
}

JS:

/*定时器,value到达100即停止*/
var pg = document.getElementById("load");
var setpg = setInterval(function(e){
if(pg.value != 100){
pg.value++;
}else{
clearInterval(setpg);
}
},80);

 

PS :这里不能设置border-radius圆角效果,不需要圆角样式的,可以修改颜色匹配项目即可。

需要圆角样式的,往下看看自定义progress

3.使用animation动画自定义progress,纯CSS

解析:使用两层DIV嵌套,外层可设置边框、背景,内层设置进度条的渐变、动画。

不熟悉动画的同学先移步 CSS:animation 简单动画效果

效果:

HTML :

<div id="out-progress">

<div id=in-progress></div>

  </div>

 

CSS:

#out-progress{
width:100%;
border:1px solid #ccc;
border-radius:10px;
background:#EEE8AA;
height:20px;
padding:1px;
}
#in-progress{
width:100%;
height:100%;
border-radius:10px;
background:-webkit-linear-gradient(left,#FFEFDB,#FF8247);
-webkit-animation:loadpg 5s 1s linear infinite;/*实际应用中infinite改为1即可实现一次性加载到头后停止*/
}
@keyframes loadpg{
0%{
width:0%;
}
100%{
width:100%;
}
}