圆形进度条:
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if IE]>
<script src="/html5shiv.min.js"></script>
<script src="/excanvas.js"></script>
<![endif]-->
</head>
<body>
<canvas class="loader"></canvas>
<script src="/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/jquery.classyloader.js"></script>
<script>
$('.loader').ClassyLoader({
animate: true,
speed: 50,//一次动画循环的时间,单位毫秒,默认值为1
diameter: 30,//圆的直径
fontSize: '20px',//字体的大小
fontFamily: 'Courier',
fontColor: 'rgba(0,0,0,0.4)',
lineColor: 'rgba(255,175,255,0.7)',
percentage: 30,//百分比
lineWidth: 10,//环的大小
start: 'top',
remainingLineColor: 'rgba(200,200,200,0.1)'
});
</script>
</body>
</html>
这里用到四个插件:
html5shiv.min.js用于兼容html5;
jquery_1.9.1.js不用多说;
excanvas.js用于兼容canvas;
jquery.classyloader.js是圆形进度条的插件,非常的强大.
其中我对jquery.classyloader.js做了点修改,使其能兼容IE6~IE8:
有两处修改,都是一样的,就是在:
var ctx = r[0].getContext("2d");
的前面加:
if(typeof window.G_vmlCanvasManager!="undefined"){ r[0] = window.G_vmlCanvasManager.initElement(r[0]); }最终:
if(typeof window.G_vmlCanvasManager!="undefined"){ r[0] = window.G_vmlCanvasManager.initElement(r[0]); } var ctx = r[0].getContext("2d");
条形进度条:
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
progress {
display: inline-block;
width: 160px;
height: 20px;
border: 1px solid #0064B4;
background-color:#e6e6e6;
color: #0064B4; /*IE10*/
}
/*ie6-ie9*/
progress ie {
display:block;
height: 100%;
background: #0064B4;
}
progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value { background: #0064B4; }
</style>
<script>
if (typeof window.screenX !== "number") {
document.createElement("progress");
document.createElement("ie");
}
</script>
</head>
<body>
<progress max="100" value="20"><ie style="width:20%;"></ie></progress>
<span>20%</span>
</body>
</html>
条形进度条的代码来自
http://www.zhangxinxu.com/study/201302/progress-compatible-ie6-ie9.html
这两款进度条都是能够兼容到IE6的,其中圆形进度条还有动态效果,非常的强大!!!
最后一款无敌的条形进度条:
<!doctype html>
<html>
<body>
<div style="width: 30%;height: 20px;border: #00B83F solid 1px;"><!--控制进度条大小-->
<div style="width: 80%;background-color: #00B83F;height: 20px;"></div><!--进度条-->
</div>
</body>
</html>
核心:两个div的嵌套
可以在里div的内部或右边加个百分比显示。
这种条形进度条在任何浏览器下都可以显示,ie5都行!
这种条形进度条常常与ligerUI等等结合应用。
想要动态?写JavaScript就行啦~