2020年8月12日

svg circle+jquery手写圆圈进度条插件 (实用系列,超简洁,原创)


svg circle+jquery手写圆圈进度条 (超简洁),在切图项目中运用写的方法,原创。

优点:大部分工作在html和css,所以二开的时候样式调整很方便,核心js代码只有3行代码,几近是剖析到本质了。

html代码


<div class="transpage-wrap">
<div class="wrapper">
<div class="transpage">
<div class="transpage-main">
<div class="dot" id="dot" style="transform: rotate(0deg);">
<span ></span>
</div>
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--1235-->
<circle id="circle" stroke-dasharray="620" stroke-dashoffset="620" cx="100" cy="100" r="98" stroke="#1482f1" stroke-width="4" fill="none" />
</svg>
</div>

<div class="num">
<font id="num">0</font>%
</div>
</div>
<div class="transpage-tit">
FX123安全卫士,正在为您检测当前访问的站点...
</div>
</div>
</div>
</div>

css代码


/*transpage*/
.transpage-wrap{
padding-top: 12%;text-align: center; padding-bottom: 50px;
}
.transpage-main{
width: 200px; height: 200px;border-radius: 50%; display: inline-block; margin-bottom: 45px;box-shadow:0 3px 10px rgba(255,255,255,0.8) inset, 0 0 18px rgba(0,0,0,0.1); position: relative; background: #f3f3f3;
}
.transpage-main .num{
font-size: 36px; color: #1482f1; line-height: 200px;font-weight: bold; position: relative; z-index: 2;
}
.transpage-main .circle{
position: absolute; left: 0; top: 0;
width: 200px; height: 200px;border-radius: 50%;
/*border: 4px solid transparent;*/
}
.transpage-main .circle svg{
width: 100%; height: 100%;
/*transform="rotate(-90)"
transform-origin="center"*/
transform: rotate(-90deg);
transform-origin: center;

}
.transpage-main .circle svg circle{
/*transition: 0.2s;*/
}
.transpage-main .dot{
position: absolute; left: 0; top: 0;
width: 200px; height: 200px;border-radius: 50%;
/*border: 4px solid transparent;*/
/*transition: 0.2s;*/
}
.transpage-main .dot span{
width: 12px; height: 12px;display: block; background: #1482f1;
border: #dce7f3 solid 6px;
border-radius: 100px;
box-sizing: content-box;
position: absolute; top: -10px; left: 50%; margin-left: -12px;
}


.transpage-tit{
font-size: 18px; color: #666;
}

js代码


//进度条
function loadingRun(num){
var curr = 0;
var set = setInterval(function(){

curr++;
$('#num').html(curr);
$('#dot').css('transform',"rotate("+ 360/100*curr +"deg)");
// 1235为满圈的长度,620为初始的长度
$('#circle').attr('stroke-dasharray',620+ (1235-620)/100*curr);

if(curr>=num){
clearInterval(set);
}

},20)
}
loadingRun(100);

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: