30个前端动态加载页实战：从CSS3动画到加载组件性能优化

简介面向Web前端开发者的动态加载页面合集收录2020年流行的30款炫酷加载动画涵盖极简、科幻、复古等多种视觉风格用于在内容加载等待期提升页面吸引力与用户体验。资源包共48个文件以32个HTML演示页为主辅以CSS样式、JavaScript脚本以及字体图标文件压缩包仅452KB轻量易用适合直接运行或参考改造。已有708人浏览学习。每一组示例都配有独立的HTMLCSSJS实现借助CSS3过渡、变换与jQuery等动画技术呈现转场、进度、动效反馈等场景阅读源码即可理解动画节奏与结构组织方式。对于希望快速掌握前端动效实现、丰富项目加载细节的初中级开发者来说是一份体量小、参考价值高的实例集合。1. 30个前端动态加载页把等待期从白屏变成页面的一部分用户点开一个web链接后头3秒里如果整屏空白他大概率会刷新退出。这个阶段是页面流失率最高的窗口也是最能体现前端开发功底的地方——不是把转圈图标换掉而是让加载画面本身具备视觉信息量。这套资源包里是30个独立的前端动态加载页demo覆盖进度型、循环型、文字遮罩型三类动画全部用HTML5CSS3jQuery 2.0.2实现浏览器打开即可预览代码量小适合直接解剖或抽取。它解决的核心问题不是“让loading变好看”而是给一个明确的加载反馈和品牌视觉留白对做web开发、前端学习以及想给现有项目快速加入加载画面的开发者都适用。2. 资源包结构与技术选型30个demo背后是同一套骨架拿到压缩包解压后第一眼是接近30个HTML文件加一堆CSS、JS、字体很容易误以为是30份互不相关的代码。逐个打开几个demo后会发现这套资源的“多”靠的是排列组合而非30套独立工程。先把目录结构理清楚后续抽取单页时才不会被带偏。2.1 目录结构长什么样解压后的顶层文件大致如下web端炫酷的30个前端动态加载页/ ├── css/ │ ├── default.css │ ├── animate.css │ └── normalize.css ├── js/ │ ├── jquery-2.0.2.min.js │ └── main.js ├── fonts/ │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── demo1.html ... demo30.html ├── index.html └── readme.htmlfonts目录里那几个不同扩展名是同一套Icomoon图标字体的四种格式浏览器按自己的支持情况选用。公共目录决定了demo之间能共享三样东西全局样式复位、动画工具类、jQuery运行时。也就是说每个demo页面自身只写最少的HTML和少量专属CSS剩下的全部依赖公共文件。在vscode里把demo.html拖进编辑器右键Open with Live Server即可也可以起一个最简静态服务# 在项目根目录执行 python3 -m http.server 8080然后浏览器访问http://localhost:8080/demo1.html。直接用file://协议打开绝大多数demo也能跑因为JS没有走跨域请求但建议还是起本地服务后面调试CSS时不用反复刷新文件缓存。2.2 三份CSS的分工边界normalize.css负责把不同浏览器的默认样式拉到同一基准线这是几乎所有现代页面都会引入的animate.css是一套轻量前端动画库提供插拔式动画类像animated bounceIn这种用法default.css才是这套资源真正的定制层——demo的页面排版、加载容器定位、遮罩层的透明过渡都定义在里面。CSS文件职责使用方式normalize.css跨浏览器默认样式一致化每个demo引入animate.css提供预设动画类按类名触发按需引用可裁剪default.cssdemo自身布局、遮罩层、动画容器每个demo引入这种分工带来的好处是想换动画风格优先改default.css里的关键帧想引入现成的入场动画直接给元素挂animate.css的类名不用动结构。Icomoon字体在多数demo里承担的是图形角色火箭、齿轮、加载小图标大概率来自字体文件而不是图片。字体图标的优势是一次网络请求字体加载完所有图标同时可用换色只需改color比Sprite图更适合做轻量动画。2.3 怎么快速摸清30个demo的底细先打开readme.html里面会列出这30个页面接着按加载动画的工作方式来分类比按外观分类更容易迁移循环型动画一直在转、闪、跑比如demo2、demo7、demo27适合短等待进度型有明显百分比或进度条比如demo14、demo23、demo28适合接口或资源加载状态型加载完成后切换成打勾、刷新图标比如demo12、demo19适合配合延时跳转。只看readme不够我一般会开着devtools逐一点开demo页面筛选出里面用到了哪些动画逻辑。动画逻辑少的demo直接读HTML就行动画逻辑多的比如数字百分比递增搜索requestAnimationFrame或setInterval就能定位关键代码。30个页面其实不到半小时就能全部过完从中挑出一个最接近业务气质的样式把对应容器结构复制出来即可。3. 动效生产机制CSS3动画与JS时序怎么配合这30个加载画面看起来花样很多但实现套路高度一致HTML铺结构、CSS写状态变化、JS管出现和消失。搞懂这套机制就不需要逐个文件去背代码。3.1 三段式逻辑遮罩层、加载容器、移除过程绝大多数demo的HTML可以抽象成下面这种结构div idloader-mask div classloader span classdot/span span classdot/span p classloading-textLOADING/p /div /div其中#loader-mask是全屏遮罩背景色和不透明度决定加载画面的视觉重量.loader是居中容器内部元素才是真正动起来的部分。CSS一侧的关键是给动画元素设置animation.loader .dot { animation: pulse 1.2s ease-in-out infinite; } .loader .dot:nth-child(2) { animation-delay: 0.2s; } keyframes pulse { 0%, 100% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.4); opacity: 1; } }这套逻辑里animation-name是pulseduration是1.2stiming-function是ease-in-outiteration-count是infinite。第二个点通过animation-delay: 0.2s把节奏错开就能形成依次跳动的波浪感。等页面加载完成JS侧给遮罩加一个结束类让它先淡出再在transition结束后把节点移除$(window).on(load, function () { $(#loader-mask).addClass(mask-hidden); setTimeout(function () { $(#loader-mask).remove(); }, 600); });这里的600ms要和CSS里定义mask-hidden的transition时长保持一致两个值不匹配时最常见的问题就是动画结束瞬间页面闪一下白底然后正文才出现。3.2 animation关键参数与animate.css的定位animation是个复合属性真正常被改的是下面几个参数取值举例作用animation-namepulse, spin, fadeInUp指定keyframes名称animation-duration1.2s, 800ms一圈动画的时长决定节奏感animation-timing-functionease-in-out, cubic-bezier(.4,0,.2,1)加速曲线影响物体的重量感animation-iteration-countinfinite, 3是否循环、循环几次animation-fill-modeforwards, both动画结束后的停留状态animation-delay0.2s, -1s延时启动或从中间某帧开始负的animation-delay很有用。想让虚线进度条的每节错开给每个节点加delay: 0s、.1s、.2s很简单但节点多了会变成一大堆重复规则我一般会把延时直接写进HTML的style里方便在浏览器里现场微调span classbar-item styleanimation-delay: 0s/span span classbar-item styleanimation-delay: .12s/span span classbar-item styleanimation-delay: .24s/spananimate.css的定位是“一次性的入场动画”适合给加载完成后要出现的正文做fadeInUp持续循环的菊花、波浪、旋转则应写在default.css或页面自己的keyframes里。两者混用不冲突的前提是只让一个外层容器做入场循环动画全部放在子元素上否则外层动画会重复触发里层动画视觉上出现明显卡顿。3.3 进度型demo的通用拆解百分比怎么动起来进度型加载页里最容易被写砸的是数字百分比。用setInterval每秒加一次数网速不好时数字到100了页面还没出来观感特别假。demo14这类环形进度页的常见做法是底层用CSS循环动画撑住视觉数值层用requestAnimationFrame独立推进let progress 0; const progressText document.getElementById(progress-text); const progressBar document.getElementById(progress-bar); function tick() { progress (Math.random() * 3); if (progress 100) progress 100; progressText.textContent Math.floor(progress) %; progressBar.style.width progress %; if (progress 100) requestAnimationFrame(tick); } requestAnimationFrame(tick);这里不直接操作width也可以改用transform: scaleX()会更省性能第5章会展开。是否真的把进度与网络请求关联取决于应用场景静态展示页用随机递增足够有真实请求时应该在每次fetch的then里把进度差值补上。这套pack里演示的是前者作用是把“等待时长”切成几段有反馈的间隔缓解焦虑而不是汇报真实字节数。4. 迁移实战把动态加载页改造成项目里的加载组件光会看demo不够把它搬到业务里才是目的。前端开发里最容易踩的坑是直接把demo.html当成组件往页面里塞然后发现遮罩盖住了导航、jQuery和框架的渲染时机打架。这里给出从这30个页面里抽取统一逻辑的路线。4.1 抽取什么、不抽什么抽取边界是这三块HTML结构、动画相关CSS、结束逻辑。业务DOM结构不要用demo里的只拿它的内部容器CSS则可以把keyframes原样拷出来单独命名空间防止冲突JS改为一个无DOM依赖的启动函数。下面是一个通用最小实现代码按原生能力重写结构沿用了进度型demo的数值推进逻辑function createLoader(options) { const mask document.createElement(div); mask.className app-loader-mask; mask.innerHTML div classapp-loader div classspinner/div span classapp-loader-text0%/span /div; document.body.appendChild(mask); let progress 0; const text mask.querySelector(.app-loader-text); const spinner mask.querySelector(.spinner); const step () { progress Math.random() * 4; if (progress 100) progress 100; text.textContent Math.floor(progress) %; if (progress 100) requestAnimationFrame(step); }; requestAnimationFrame(step); return { hide() { mask.classList.add(is-done); spinner.style.animationPlayState paused; mask.addEventListener(transitionend, () mask.remove(), { once: true }); }, }; }调用时是这样const loader createLoader({ minVisible: 800 }); // 模拟数据请求 setTimeout(() loader.hide(), 1500);hide()里用transitionend监听淡出结束再移除遮罩而不是死等一个setTimeout这样与CSS层的transition时长解耦。遮罩背景用半透明渐变让页面主体从遮罩下透出来一点观感接近真正的Skeleton屏而不是把用户完全挡在一个不透明黑幕后面。把loader做成独立函数之后它自然积累为你自己的前端组件库里的一个标准项。4.2 加载完成的正确判定时机window.load得等全部图片、字体、脚本加载完才触发页面资源多时会拖长加载画面只等DOMContentLoaded又太早图片还是一堆空白。我一般按资源类型拆开处理Promise.all([ new Promise(resolve window.addEventListener(load, resolve)), new Promise(resolve { const imgs document.querySelectorAll(img); let remain imgs.length; if (!remain) return resolve(); imgs.forEach(img { if (img.complete) remain - 1; else img.addEventListener(load, () { remain - 1; if (remain 0) resolve(); }, { once: true }); }); }), ]).then(() loader.hide());这个Promise数组里的第一个Promise保证字体和脚本资源就绪第二个Promise单独等图片落袋。只要有一个还没有加载画面就不会提前消失。图片没有complete且加载失败时error事件会漏掉计数所以更严谨的写法是同时监听error把计数减掉避免遮罩永远出不来。4.3 用一个映射表定场景先判断自己要拿哪一种迁移起来更快加载类型对应demo适合场景进度型demo14、demo23、demo28接口请求、资源加载循环型demo2、demo7、demo27短等待、路由过渡状态型demo12、demo19表单提交、结果回执还有一个容易被忽略的点加载画面出现之后如果页面内容在几十毫秒内就绪动画刚转起来就消失会给人一种闪断感。更实用的策略是保证最小展示时间把“最短停留时间”和“加载完成”同时满足后再隐藏const ready [fetchData(), delay(1200)].reduce((p, n) p.then(() n), Promise.resolve()); ready.then(() loader.hide());这种设计不单是为了好看而是让加载时长本身成为页面视觉节奏的一部分。换成Vue或React项目时思路同样适用把createLoader放进自定义hook或组件里挂载时启动Promise卸载时调hide()遮罩就与页面生命周期解耦了。5. 进阶收尾加载动画的性能底线与验证方法把30个demo搬到项目里之后最容易出的问题不是功能而是掉帧。这一部分把动画参数、浏览器渲染原理和验证串成一条线。不要直接用jQuery的.animate()去做加载动画。jQuery内部按tick修改属性操作的是left、top、width这类布局属性每次变化都触发Layout。demo里用jQuery 2.0.2可以因为它是教学代码业务代码里应该改用CSStransform: rotate/scale/translate动画直接在合成层完成不强制走主线程重排。.spinner { animation: spin 1s linear infinite; will-change: transform; } keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }will-change: transform是提示浏览器提前为这个元素建合成层数量必须克制整页几十个元素都加这个属性会耗尽GPU内存。CSS Variable可以把时长收敛到一处后面调起来很快.loader { --loader-duration: 1.2s; animation-duration: var(--loader-duration); } media (prefers-reduced-motion: reduce) { .loader * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } }给低动效偏好用户一个安静的版本在无障碍层面也值得做。另一个容易遇到的问题是切到后台Tab时动画依然在跑白白消耗手机资源。在页面visibilitychange里暂停回到前台再恢复document.addEventListener(visibilitychange, () { document.querySelectorAll(.loader *).forEach(el { el.style.animationPlayState document.hidden ? paused : running; }); });验证方式建议直接用Chrome DevTools的Performance录制5秒观察Scripting与Rendering两条轨道是否出现连续高柱。把Network切到Slow 3G再刷新一次如果FCP没有明显提前说明动画资源和遮罩本身的体积需要压缩比如把Icomoon字体裁剪成只保留用到的图标。常驻调试还有一个技巧devtools里执行document.querySelectorAll(.loader *)拿到所有动画节点直接改其中一个的animation-duration页面会热更新到新时长可以在不刷新页面的情况下观察节奏差异。把这句配置纳入性能回归清单切换Network到Slow 3G刷新后看看animation-duration是否需要从1.2s改到0.8s以下别让加载画面本身成为第二个等待瓶颈。本文还有配套的精品资源点击获取