1. 先想清楚加载动画到底在解决什么问题做前端这些年我越来越觉得加载与进度条这类小玩意儿是被严重低估的。业务页面的交互做得再花哨一旦接口慢半拍用户看到的是一片白屏那种这网站是不是挂了的疑虑会瞬间击穿所有精心设计的视觉。CSS 动画加载与进度条特效的价值就在这儿——它本质上是给等待过程做一次情绪缓冲。用户不知道后台在干什么但屏幕上有个东西在转、在呼吸、在流动他心里就有底。这套东西总共 17 个特效我前后肝了两个晚上一边调关键帧一边在真机上测帧率踩的坑比想象中多。这篇文章就围绕 CSS 加载动画和进度条特效这件事把原理、写法、参数计算、性能取舍和避坑经验一次性讲透不管你是刚学 CSS 三件套的新手还是已经在做组件库的老手都能从中抄到能直接用的作业。先说清楚这篇文章适合谁。如果你只会写display: none和display: block来切换 loading 显隐那看完至少能做出五六个不丢人的加载效果如果你已经在用现成的 UI 框架但总觉得自带的 spinner 太寡淡想自己改一套有辨识度的那这里的环形进度、条纹流光、骨架屏方案可以直接搬。核心关键词就四个CSS、动画、加载、进度条所有内容都围着它们转。1.1 加载态的本质是不确定性的可视化我们得先把一个认知掰正绝大多数场景下前端根本拿不到真实进度。你发起一个fetch浏览器不会告诉你服务器处理到百分之几了HTTP 协议本身也没这个字段。所以真正能落地的加载态分两大类——不确定进度和确定进度。不确定进度就是那种无限循环的转圈、呼吸、跑马灯它传递的信息只有一句话我在干活别急。确定进度则是你能拿到百分比比如文件上传用XMLHttpRequest的upload.onprogress或者分片上传自己累加已完成的分片数或者初始化一个已知步骤数的流程。这两种场景对动画的要求完全不同前者要的是永不停止且看起来不假后者要的是数字和视觉严格同步、不能倒着走。很多人做出来的进度条之所以假就是因为拿不确定动画硬套确定场景比如百分比已经到 80% 了条纹还在按固定速度跑视觉和数字打架。想明白这层后面选方案就不会乱。1.2 17 个特效我是怎么归类的一开始我是零散地做做第五个的时候就发现代码在重复。于是停下来重新分类最后归成三族旋转类环形、弧形、齿轮、节奏类圆点呼吸、方块跳动、文字波浪、流动类条纹跑马灯、渐变流光、骨架屏扫光。这三族对应三种不同的视觉语言选哪个取决于你的产品调性——工具类产品适合旋转类干净利落社区类适合节奏类活泼有温度内容平台最适合流动类因为骨架屏能提前占位减少布局跳动。归好类之后再写代码你会发现很多关键帧可以抽成公共的 CSS 自定义属性改一个变量就能换风格。这也是我第二晚的主要工作把 17 个特效的硬编码全换成变量驱动代码量直接砍掉一半。2. 动画地基三件必须吃透的事写动画之前有些底层认知绕不过去。它们不解决好看不好看但决定卡不卡。我见过太多人动画写得挺美一上真机就掉帧问题全出在这一层。2.1 transform 和 opacity 为什么是性能最优解浏览器渲染一帧要走五步解析样式、布局Layout、绘制Paint、合成Composite中间还有一层分层。当你改width、height、top、left、margin这类属性时浏览器得重新算布局整棵渲染树都受影响这一步叫重排代价最高。改background-color、box-shadow这类会触发重绘代价次之。而transform和opacity不同它们可以只在合成层处理GPU 直接干活不碰布局也不碰绘制。所以你会看到所有专业级加载动画都有一个共同特征优先动 transform其次动 opacity。想让圆点上下跳别去改top用translateY想让方块缩放别改width用scale。这一条是我前两天调帧率时最深的体会——把一段用top做动画的代码改成translateY之后中端安卓机的掉帧直接消失了。/* 不推荐触发重排 */ keyframes badBounce { 0% { top: 0; } 50% { top: -20px; } 100% { top: 0; } } /* 推荐只走合成层 */ keyframes goodBounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }注意transform的百分比是相对元素自身尺寸算的translateY(-50%)是移动自身高度的一半而top: -50%是相对父容器。这两个千万别混我第一晚就在这儿绕了半小时。2.2 animation 和 transition 该用哪个新手常纠结这俩。一句话区分transition 是从 A 到 B 的过渡必须有状态变化触发animation 是关键帧剧本可以自己跑起来、自己循环。加载动画需要无限循环天然属于 animation 的地盘。进度条则要分情况——如果进度值是通过 JS 动态设置的用 transition 更合适因为它能自动补间你只管改宽度就行如果要做条纹跑马灯这种自身循环的效果那还是 animation。实操里我经常两者叠加外层容器用 transition 处理进度变化内层条纹用 animation 做流动。这样数字涨的时候条纹速度不受影响视觉更稳。2.3 缓动函数决定了动画有没有灵魂这是最容易被忽视的一环。默认的linear匀速用在旋转上没问题但用在呼吸、跳动上就非常机械像机器人在抽搐。真实世界里没有匀速运动物体有惯性、有加速减速。我常用的几个缓动函数手感适合场景linear匀速机械旋转环、跑马灯、条纹流动ease-in-out两头慢中间快呼吸、缩放、脉冲cubic-bezier(0.4, 0, 0.2, 1)干脆利落Material 风格的进度变化cubic-bezier(0.34, 1.56, 0.64, 1)带一点回弹跳跃、弹入的方块那个回弹曲线cubic-bezier(0.34, 1.56, 0.64, 1)里第二个值大于 1意味着会略微冲过目标再回来这个过冲就是弹性感的来源。我把它用在方块跳动的触底反弹上效果比死板的ease高级一大截。3. 加载类特效实操六条能直接抄的路径前面地基铺好了这一节开始上真家伙。我把加载类特效里最典型、复用率最高的几种实现路径拆开讲每一个都给出完整代码和参数说明。3.1 圆点呼吸与错峰延迟三个点依次跳动是最经典的加载动画。核心难点不在动画本身而在错峰——如果三个点同时跳那就是一个整块在闪很傻。做法是给每个点加不同的animation-delay。.dots { display: flex; gap: 8px; align-items: center; } .dots span { width: 12px; height: 12px; border-radius: 50%; background: #4a6cf7; animation: dotBreathe 1.2s ease-in-out infinite; } .dots span:nth-child(2) { animation-delay: 0.15s; } .dots span:nth-child(3) { animation-delay: 0.3s; } keyframes dotBreathe { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }这里的参数值得细抠。1.2s的总时长是我反复试出来的——低于 1s 会显得焦躁高于 1.5s 又会拖沓。关键帧里0%, 80%, 100%保持小状态只有40%那一刻放大这样每个点有 80% 的时间在歇着视觉上才有节奏感。0.15s的错峰间隔约等于总时长的八分之一三个点刚好铺满一个周期不会有空档也不会有重叠。3.2 conic-gradient 做的环形加载圈纯旋转边框做转圈有个经典坑用一个border四边不同色再旋转会看到颜色在拐角处被打断因为边框是矩形拼的。想要真正的环形渐变conic-gradient是正解。.spinner { width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, #4a6cf7 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); animation: spin 0.9s linear infinite; } keyframes spin { to { transform: rotate(360deg); } }conic-gradient从 0 度把颜色从透明渐变到实色视觉上就是一个尾端渐隐的弧。外面那层mask用径向渐变把中间挖空calc(100% - 5px)决定了环的粗细——这里 5px 就是环宽。想改粗细只改这一个数字。注意mask在部分旧版本内核里需要-webkit-前缀两个都写上是最省心的做法。3.3 骨架屏与条纹扫光骨架屏是我现在最推荐给内容类产品的加载方案因为它能提前占位减少真实内容出现时的布局抖动。基座是一块灰色圆角矩形上面盖一层从左扫到右的高光。.skeleton { position: relative; overflow: hidden; background: #eceff4; border-radius: 6px; } .skeleton::after { content: ; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100% ); animation: sweep 1.4s ease-in-out infinite; } keyframes sweep { 100% { transform: translateX(100%); } }关键是高光条的宽度和速度。渐变里50%那个位置是纯白两侧透明形成一条柔和的光带。translateX(-100%)到translateX(100%)的跨度刚好让光带完整穿过去一次。速度我定在1.4s太快像故障闪烁太慢显得卡。3.4 文字波浪与装饰性删除线热门搜索里css 删除线这个词出现频率不低其实删除线也能做点花样。给加载文字加一条会生长的删除线是一种很有设计感的效果——比如加载中三个字下面一条线从左往右长出来再退回去。.loading-text { position: relative; color: #667085; letter-spacing: 2px; } .loading-text::after { content: ; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: #4a6cf7; transform: scaleX(0); transform-origin: left center; animation: growLine 1.6s ease-in-out infinite; } keyframes growLine { 0% { transform: scaleX(0); transform-origin: left center; } 50% { transform: scaleX(1); transform-origin: left center; } 51% { transform: scaleX(1); transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } }这里的巧思在transform-origin的切换。前 50% 线段从左边长出来origin 在左后 50% 从右边缩回去origin 在右这样看起来就是一条线扫过去而不是缩回起点。这种 origin 反转的技巧在进度条、下划线动画里通用值得记牢。4. 进度条特效确定与不确定的两套打法进度条比加载动画复杂因为它要处理进度值这个概念。我把两套打法分开讲你对号入座。4.1 不确定进度条无限循环的跑马灯先讲简单的。当你完全拿不到进度时用一条来回跑或者循环流动的条配合条纹视觉信息量足够。.bar { height: 8px; border-radius: 4px; overflow: hidden; background: #eceff4; } .bar__fill { height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, #4a6cf7, #7b9bff, #4a6cf7); background-size: 200% 100%; animation: flow 1.2s linear infinite; } .bar__fill--indeterminate { animation: slide 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } keyframes flow { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } } keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }两个动画叠加内层的flow让渐变背景自身流动外层的slide让整条填充块在容器里滑动。background-size: 200% 100%是为了让渐变有足够的余量来滚动如果设成100%滚动时会出现断层。填充块宽度取 40%滑到250%时刚好从右边完全出去这个数字是按(100% / 40%) * 100% 250%算出来的——你要改宽度这个位移值也得跟着改否则会在半路停住或提前消失。4.2 确定进度条让视觉和数字严格同步拿到真实百分比时最好用 transition 而不是 animation因为 transition 会自动补间任意起止值。.bar__fill--determinate { width: 0; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }JS 那边只管设宽度function updateProgress(el, percent) { const safe Math.max(0, Math.min(100, percent)); // 夹紧防越界 el.style.width safe %; }Math.max(0, Math.min(100, percent))这行夹紧看似多余但我真遇到过后端返回超过 100 的情况进度条直接冲出容器画面相当难看。防御性写法不是洁癖是血泪。另外0.4s的过渡时长有个讲究太短数字跳动会很生硬太长会出现数字到 90% 了视觉还在 70%的滞后。0.4s 左右是个平衡点。4.3 SVG 环形进度确定进度里的颜值担当需要环形进度时很多人第一反应是conic-gradient但它的进度是连续的无法优雅地处理跳变和带圆头端点。这时候 SVG 的stroke-dasharray才是专业选择。svg classring viewBox0 0 100 100 circle classring__track cx50 cy50 r45 / circle classring__bar cx50 cy50 r45 / /svg.ring { width: 120px; height: 120px; transform: rotate(-90deg); } .ring__track { fill: none; stroke: #eceff4; stroke-width: 8; } .ring__bar { fill: none; stroke: #4a6cf7; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 0.4s ease; }这里的283是圆周长的近似值公式是2 × π × rr 45时算出来是282.74。圆周长就是dasharray的总长度。dashoffset从整圈长全隐藏减到 0全显示中间任意值对应的就是进度。JS 里这么写function setRingProgress(el, percent, circumference 283) { const safe Math.max(0, Math.min(100, percent)); el.style.strokeDashoffset circumference * (1 - safe / 100); }rotate(-90deg)是为了让起点从 12 点方向开始不然默认从 3 点方向起步看着别扭。stroke-linecap: round让进度末端是个圆头颜值瞬间上去。这个方案我实测下来在移动端表现非常稳因为是 SVG 矢量任何分辨率下都不糊。注意stroke-dashoffset走的不是合成层频繁改会有一定绘制开销。如果进度更新极其频繁比如每秒几十次建议用requestAnimationFrame节流一下别每一帧都写 DOM。