验证中...
Languages: HTML
Categories: CSS 技巧
Latest update 2019-05-11 18:47
CSS JQ 环型进度
Raw Copy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆形进度</title>
<style>
.progress {display:block;position:relative;margin:50px auto;width:100px;height:100px;border-radius:50%;background:#eee;overflow:hidden;}
.progress div {display:block;position:absolute;top:0;left:0;width:101%;height:101%;border-radius:50%;}
.progress_c {background:#eee;clip:rect(0,100px,100px,50px);z-index:3;}
.progress_l {background:#ccc;clip:rect(0,100px,100px,50px);z-index:4;}
.progress_r {background:#ccc;clip:rect(0,50px,100px,0px);z-index:2;}
.progress_t {margin:20px;font:20px/60px arial;text-align:center;background:#fff;z-index:6;}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="progress">
<div class="progress_c"></div>
<div class="progress_l"></div>
<div class="progress_r"></div>
<div class="progress_t" style="width:60px;height:60px;"><b>0</b>%</div>
</div>
<script type="text/javascript">$(function(){
var percent=0;
var progress=setInterval(function(){
if(percent>50){
$('.progress_l').hide();
$('.progress_r').css("-webkit-transform","rotate("+(18/5)*(percent - 50)+"deg)");
}else{
$('.progress_l').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
}
$('.progress_t>b').text(percent);
percent++;
if( percent > 100 ){clearInterval(progress);}
},100);
})</script>
</body>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_you_jiang_zheng_wen Zheng_wen_close