Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background-color:#2A2A2A; } svg { cursor:pointer; position:absolute; width:196px; height:196px; top:50%; left:50%; transform:translate(-50%,-50%); } svg path { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } svg #line { stroke:#999; stroke-dasharray:45,0,45,999; stroke-dashoffset:-140; transition-property:all; transition-timing-function:ease; transition-duration:0.7s; } svg.shrink #line { stroke-dasharray:1,87,1,999; stroke-dashoffset:-140; transition-duration:0.3s; transition-timing-function:cubic-bezier(0.25,-0.25,0.75,1.25); } svg.check #line { stroke-dasharray:9,340,24,999; stroke-dashoffset:0; transition-timing-function:cubic-bezier(0.25,-0.25,0.75,1.25); transition-duration:0.5s; } svg.circle-full #line { stroke-dasharray:75,127,75,999; stroke-dashoffset:-45; transition-timing-function:linear; transition-duration:2s; } svg.circle-empty #line { stroke-dasharray:1,127,1,999; stroke-dashoffset:-119; transition-duration:0.3s; transition-timing-function:cubic-bezier(0.25,-0.25,0.75,1.25); } svg #circle-bg { stroke:#eee; transform:scale(1); transform-origin:50%; } svg #circle-hover { opacity:0; stroke:#0ebeff; transition:opacity 0.1s ease; } svg:hover #circle-hover,svg.shrink #circle-hover,svg.check #circle-hover,svg.circle-full #circle-hover,svg.circle-empty #circle-hover { opacity:1; } svg.shrink #circle-bg { transform:scale(1.3); transform-origin:50%; transition-duration:0.2s; stroke:#aaa; opacity:0; } html,body { height:100%; }
JavaScript
(function() { var $svg, check, circleEmpty, circleFull, i, reset, shrink, t, to; $svg = $('svg'); to = null; t = function(ms, cb, fn) { return to = setTimeout(function() { fn(); return cb(); }, ms); }; shrink = function(cb) { return t(0, cb, function() { return $svg.attr("class", "shrink"); }); }; circleEmpty = function(cb) { return t(300, cb, function() { return $svg.attr("class", "circle-empty"); }); }; circleFull = function(cb) { return t(700, cb, function() { return $svg.attr("class", "circle-full"); }); }; check = function(cb) { return t(2000, cb, function() { return $svg.attr("class", "check"); }); }; reset = function(cb) { return t(3000, cb, function() { return $svg.attr("class", null); }); }; $svg.click(function() { clearInterval(i); if ($svg.attr("class") != null) { $svg.attr('class', null).clearQueue(); return clearTimeout(to); } else { return $svg.queue(shrink).queue(circleEmpty).queue(circleFull).queue(check).queue(reset); } }); $svg.on('mouseenter mouseover', function() { return clearInterval(i); }); i = setInterval(function() { return $svg.click(); }, 15000); }).call(this);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>下载图标和进度-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号