Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
0%
css
.button { --default: rgba(255, 255, 255, .2); --active: #fff; position: relative; border: none; outline: none; background: none; padding: 0; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; cursor: pointer; transform: scale(var(--s, 1)); transition: transform 0.2s; } .button:active { --s: .96; } .button svg { display: block; fill: none; stroke-width: var(--sw, 3px); stroke-linecap: round; stroke-linejoin: round; } .button .circle { width: 76px; height: 76px; transform: rotate(-90deg); } .button .circle circle.default { stroke: var(--default); } .button .circle circle.active { stroke: var(--active); stroke-dasharray: 227px; stroke-dashoffset: var(--active-offset, 227px); transition: stroke-dashoffset var(--all-transition, 4s) ease var(--all-delay, 0.8s); } .button span { display: block; position: absolute; left: 0; right: 0; text-align: center; bottom: 13px; font-weight: 500; font-size: 10px; color: var(--active); opacity: var(--count-opacity, 0); transform: translateY(var(--count-y, 4px)); -webkit-animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s); animation: var(--count, none) 0.3s ease forwards var(--all-delay, 4.6s); transition: opacity 0.2s ease 0.6s, transform 0.3s ease 0.6s; } .button .icon { --sw: 2px; width: 24px; height: 40px; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -12px; } .button .icon svg.line { width: 4px; height: 37px; stroke: var(--active); position: absolute; left: 10px; top: 0; stroke-dasharray: 0 33px var(--line-array, 33px) 66px; stroke-dashoffset: var(--line-offset, 33px); transform: translateY(var(--line-y, 0)); opacity: var(--line-opacity, 1); transition: stroke-dasharray 0.2s, stroke-dashoffset 0.2s, transform 0.32s ease var(--all-delay, 0.25s); } .button .icon div { width: 40px; height: 32px; position: absolute; overflow: hidden; left: 50%; bottom: 1px; margin-left: -20px; transform: translate(var(--icon-x, 0), var(--icon-y, 0)); transition: transform 0.3s ease var(--all-delay, 4.8s); -webkit-animation: var(--overflow, none) 0s linear forwards var(--all-delay, 4.8s); animation: var(--overflow, none) 0s linear forwards var(--all-delay, 4.8s); } .button .icon div:before, .button .icon div:after { content: ""; position: absolute; z-index: 1; height: 2px; left: var(--l, 0); top: 15px; width: var(--w, 16px); background: var(--active); border-radius: 1px; transform-origin: var(--tx, 15px) 1px; transform: rotate(var(--before-rotate, 0deg)); opacity: var(--tick-opacity, 0); transition: transform 0.4s ease var(--all-delay, 4.8s), opacity 0s linear var(--all-delay, 4.8s); } .button .icon div:after { --l: 14px; --w: 26px; --tx: 1px; transform: rotate(var(--after-rotate, 0deg)); } .button .icon div svg { stroke: var(--active); } .button .icon div svg.arrow { width: 40px; height: 32px; opacity: var(--arrow-opacity, 1); transition: opacity 0s linear var(--all-delay, 1s); } .button .icon div svg.progress { width: 444px; height: 10px; position: absolute; left: 0; top: 11px; transform: translateX(var(--progress-x, 0)); opacity: var(--progress-opacity, 0); transition: transform var(--all-transition, 4.4s) ease var(--all-delay, 0.4s), opacity 0s linear var(--all-delay, 1s); -webkit-animation: var(--hide, none) 0s linear forwards var(--all-delay, 4.8s); animation: var(--hide, none) 0s linear forwards var(--all-delay, 4.8s); } .button.loading:not(.reset) { --line-y: -36px; --line-array: 0; --line-offset: 15px; --active-offset: 0; --arrow-opacity: 0; --progress-opacity: 1; --progress-x: -400px; --tick-opacity: 1; --before-rotate: 47deg; --after-rotate: -46deg; --hide: hide; --overflow: overflow; --icon-x: 2px; --icon-y: 7px; --count-opacity: 1; --count-y: 0; --count: count; } .button.reset { --all-delay: 0s; --all-transition: .3s; } @-webkit-keyframes hide { to { opacity: 0; } } @keyframes hide { to { opacity: 0; } } @-webkit-keyframes count { to { transform: translateY(4px); opacity: 0; } } @keyframes count { to { transform: translateY(4px); opacity: 0; } } @-webkit-keyframes overflow { to { overflow: visible; } } @keyframes overflow { to { overflow: visible; } } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; font-family: "Inter", "Inter UI", Arial; display: flex; justify-content: center; align-items: center; background: #275EFE; font-family: "Roboto", Arial, sans-serif; }
JavaScript
const $ = (s, o = document) => o.querySelector(s); const $$ = (s, o = document) => o.querySelectorAll(s); $$('.button').forEach(button => { let count = { number: 0 }, icon = $('.icon', button), iconDiv = $('.icon > div', button), arrow = $('.icon .arrow', button), countElem = $('span', button), svgPath = new Proxy({ y: null, s: null, f: null, l: null }, { set(target, key, value) { target[key] = value; if(target.y !== null && target.s != null && target.f != null && target.l != null) { arrow.innerHTML = getPath(target.y, target.f, target.l, target.s, null); } return true; }, get(target, key) { return target[key]; } }); svgPath.y = 30; svgPath.s = 0; svgPath.f = 8; svgPath.l = 32; button.addEventListener('click', e => { if(!button.classList.contains('loading')) { if(!button.classList.contains('animation')) { button.classList.add('loading', 'animation'); gsap.to(svgPath, { f: 2, l: 38, duration: .3, delay: .15 }); gsap.to(svgPath, { s: .2, y: 16, duration: .8, delay: .15, ease: Elastic.easeOut.config(1, .4) }); gsap.to(count, { number: '100', duration: 3.8, delay: .8, onUpdate() { countElem.innerHTML = Math.round(count.number) + '%'; } }); setTimeout(() => { iconDiv.style.setProperty('overflow', 'visible'); setTimeout(() => { button.classList.remove('animation'); }, 600); }, 4820); } } else { if(!button.classList.contains('animation')) { button.classList.add('reset'); gsap.to(svgPath, { f: 8, l: 32, duration: .4 }); gsap.to(svgPath, { s: 0, y: 30, duration: .4 }); setTimeout(() => { button.classList.remove('loading', 'reset'); iconDiv.removeAttribute('style'); }, 400); } } e.preventDefault(); }); }); function getPoint(point, i, a, smoothing) { let cp = (current, previous, next, reverse) => { let p = previous || current, n = next || current, o = { length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)), angle: Math.atan2(n[1] - p[1], n[0] - p[0]) }, angle = o.angle + (reverse ? Math.PI : 0), length = o.length * smoothing; return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length]; }, cps = cp(a[i - 1], a[i - 2], point, false), cpe = cp(point, a[i - 1], a[i + 1], true); return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`; } function getPath(update, first, last, smoothing, pointsNew) { let points = pointsNew ? pointsNew : [ [first, 16], [20, update], [last, 16] ], d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, ''); return `
`; }
粒子
时间
文字
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号