看到一些高大上的进度条插件，然后想自己用CSS写。经过搜索资料之后，终于成功了。为了以后方便拿来用，或者复习。将代码贴出。
HTML代码：
只需要两个div，外面的为一个有border的div id为wd ，然后包裹一个小div id为percent，height为100%，宽度为wd的百分比（相对于父容器，percent的父容器为wd，如wd的宽度width为100px,percent的width设置为50%就是100*50%=50px）
<div class="wd">
<div class="percent"></div>
</div>
CSS的代码如下：（兼容性需要考虑，因为懒就没有考虑到兼容性了，在Chrome 运行没问题）
.wd{
width: 100%;
height: 20px;
background: #f5f5f5;
border: 1px solid #9d9d9d;
margin-bottom: 40px;
border-radius: 4px;
overflow: hidden;
-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.percent{
background: #337ab7;
background-image: linear-gradient(-45deg,//这里为渐变
rgba(255,255,255,.2) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,.2) 50%,
rgba(255,255,255,.2) 75%,
transparent 75%);
background-size: 18px 18px;//该值后面的 请设置为进度条的高度因为有border 所以为18px
height: 100%;
width: 40%;//表示进度条在40%的位置
-webkit-animation: all 1.5s linear infinite;//动画
-o-animation: all 1.5s linear infinite;
animation: all 1.5s linear infinite;
}
@keyframes all {//动画设置
0%{
background-position: 0 0;
}
100%{
background-position: -10px -10px;
}
}
HTML5画圆环:\
HTML:
<canvas id="bg" class="bg" >
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
CSS
.bg{
width:300px ;height:300px;
border: 1px solid red;
}
JS代码：
var c=document.getElementById("bg");
var ctx=c.getContext("2d");
// ctx.fillStyle = '#FF0000';
ctx.strokeStyle='#99CC33';
ctx.lineWidth=10.0;
// ctx.lineCap = 'square';
imd = ctx.getImageData(200 ,200 ,255, 200);
var drow= function (curr) {
ctx.putImageData(imd, 0, 0);
ctx.beginPath();
ctx.arc(95,60,50,-0.5*Math.PI,curr*2*Math.PI-0.5*Math.PI);
ctx.moveTo(95,60);
ctx.closePath();
ctx.stroke();
};
var t=0;
var lod= function (gos) {
var te=setInterval(function () {
if (t>gos){
clearInterval(te);
}else{
drow(t);
t+=0.01;
}
},5)
};
lod(0.8);
JS：改动代码可以实现环形进度条
var c=document.getElementById("bg");
var ctx=c.getContext("2d");
var drow= function (curr) {
ctx.clearRect(0,0, c.width, c.height);
ctx.beginPath();
ctx.strokeStyle='#333';
ctx.lineWidth=13;
ctx.arc(140,80,50,-0.5*Math.PI,1.5*Math.PI);
ctx.moveTo(140,80);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineWidth=10;
ctx.arc(140,80,50,-0.5*Math.PI,curr*2*Math.PI-0.5*Math.PI);
ctx.moveTo(140,80);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="#f00";
ctx.font="30px abc";
text = Math.floor(curr*100)+"%";
text_w = ctx.measureText(text).width;
ctx.fillText(text,120,90);
};
var t=0;
var lod= function (gos) {
var te=setInterval(function () {
if (t>gos){
clearInterval(te);
}else{
t+=0.01;
drow(t);
}
},5)
};
lod(0.9);
最后附上Dome地址啦http://runjs.cn/detail/8p1gmf9b