svg+css实现圈圈loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:svg+css实现圈圈loading加载动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,95%); --fg: hsl(var(--hue),90%,5%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background-color: var(--bg); color: var(--fg); font: 1em/1.5 sans-serif; height: 100vh; display: grid; place-items: center; transition: background-color var(--trans-dur); } main { padding: 1.5em 0; } .pl { display: block; overflow: visible; width: 8em; height: 8em; } .pl__ring { stroke: hsla(var(--hue),90%,5%,0.1); transition: stroke var(--trans-dur); } .pl__worm { stroke: var(--primary); transform-origin: 64px 64px; visibility: hidden; } .pl__worm--moving { animation: worm 8s linear; visibility: visible; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,5%); --fg: hsl(var(--hue),90%,95%); } .pl__ring { stroke: hsla(var(--hue),90%,95%,0.1); } } /* Animations */ @keyframes worm { from { stroke-dasharray: 22 307.86 22; transform: rotate(0); } to { stroke-dasharray: 2 347.86 2; transform: rotate(4turn); } } </style> </head> <body > <main> <svg class="pl" viewBox="0 0 128 128" width="128px" height="128px" xmlns="http://www.w3.org/2000/svg"> <g fill="none" stroke-linecap="round" stroke-width="16" transform="rotate(-90,64,64)"> <circle class="pl__ring" r="56" cx="64" cy="64" stroke="#ddd" /> <circle class="pl__worm pl__worm--moving" r="56" cx="64" cy="64" stroke="currentColor" stroke-dasharray="22 307.86 22" data-worm /> </g> <g data-particles></g> </svg> </main> <script > window.addEventListener("DOMContentLoaded",() => { const dp = new DecayingPreloader(".pl"); }); class DecayingPreloader { particles = []; totalParticles = 120; replayTimeout = null; constructor(el) { this.el = document.querySelector(el); this.particleGroup = this.el?.querySelector("[data-particles]"); this.worm = this.el?.querySelector("[data-worm]"); this.init(); } init() { this.spawnParticles(this.totalParticles); this.worm?.addEventListener("animationend",this.replayParticles.bind(this)); } createParticle(x,y,r,delay) { const particle = new DecayParticle(x,y,r,delay); this.particleGroup?.appendChild(particle.g); // animation params particle.gAnimation = particle.g.animate( [ { transform: `translate(${particle.x}px,0)` }, { transform: `translate(${particle.x + particle.dx}px,0)` }, ], { delay: particle.delay, duration: particle.duration, e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0