解决方案是使用svg的circle元素结合css的stroke-dasharray和stroke-dashoffset属性实现加载进度环动画；2. 通过计算圆周长（约340）设置stroke-dasharray为“170 340”形成半环描边，stroke-dashoffset初始为170使描边隐藏；3. 利用@keyframes动画同时改变stroke-dashoffset和transform: rotate，制造描边生长与旋转的追逐效果；4. 为提升流畅度，采用ease-in-out缓动函数、stroke-linecap: round使端点圆润，并可通过多层叠加增强视觉效果；5. 实际应用中可扩展为上传进度、按钮加载反馈、数据仪表盘等场景，结合javascript动态更新实现精确百分比展示；6. 添加aria属性确保可访问性，使动画兼具美观与实用性，最终完成一个专业级的css加载进度环动画。
想要用CSS做出那种漂亮的加载进度环动画，特别是那种像进度条一样逐渐填充或旋转的效果，
stroke-dashoffset
绝对是个核心魔法。它配合
stroke-dasharray
，能让我们对SVG路径的描边玩出花来，再搭上CSS动画，一个活灵活现的进度环就有了。
解决方案
制作一个经典的CSS加载进度环动画，通常会用到SVG的
<circle>
元素，然后通过CSS来控制它的描边（stroke）属性。这里的关键是
stroke-dasharray
和
stroke-dashoffset
这两个SVG属性，它们能让我们把圆形的描边“切开”并“移动”，再结合CSS的
@keyframes
动画，就能实现那种不断旋转、仿佛在填充或清空的视觉效果。
首先，我们需要一个简单的HTML结构，包含一个SVG元素和里面的两个
circle
：一个作为背景环，一个作为前景的进度环。
<span>立即学习“前端免费学习笔记（深入）”；
<div class="loader-wrapper"> <svg class="progress-spinner" viewBox="0 0 120 120"> <!-- 背景环：通常是浅色或半透明，作为进度条的轨道 --> <circle class="spinner-background" cx="60" cy="60" r="54" stroke="#e0e0e0" stroke-width="6" fill="none"/> <!-- 进度环：通过 stroke-dasharray 和 stroke-dashoffset 来动画 --> <circle class="spinner-progress" cx="60" cy="60" r="54" stroke="#007bff" stroke-width="6" fill="none" stroke-linecap="round"/> </svg> </div>
接着，就是CSS的魔法时刻了。我们需要计算圆的周长，因为
stroke-dasharray
和
stroke-dashoffset
都是基于这个长度来工作的。对于半径为
r
的圆，周长是
2 * π * r
。这里半径是54，所以周长大约是
2 * 3.14159 * 54 ≈ 339.29
。我们取个整数，比如340。
.loader-wrapper { display: flex; justify-content: center; align-items: center; min-height: 200px; /* 只是为了演示居中 */ background-color: #f8f9fa; } .progress-spinner { width: 100px; /* 控制SVG大小 */ height: 100px; /* 确保旋转中心是SVG的中心 */ transform-origin: center center; } .spinner-background { /* 基础样式，保持不变 */ } .spinner-progress { /* 关键在这里：定义描边模式和初始偏移 */ /* stroke-dasharray: 定义虚线和空白的长度。这里我们让虚线长度为周长的一半，空白也为周长的一半。 这样就只显示半个圆的描边。 */ stroke-dasharray: 170 340; /* 170 是周长 340 的一半 */ /* stroke-dashoffset: 初始偏移量。设置为周长的一半，使得描边一开始是隐藏的。 */ stroke-dashoffset: 170; /* 旋转动画的起点调整，让描边从顶部开始 */ transform: rotate(-90deg); /* 确保旋转是围绕圆心进行的 */ transform-origin: 60px 60px; /* cx 和 cy 的值 */ /* 组合动画：一个负责描边的伸缩（dash），一个负责整体的旋转（rotate） */ animation: dash 1.5s ease-in-out infinite, rotate 1.5s linear infinite; } /* 描边动画：控制 stroke-dashoffset 的变化，制造出描边“生长”和“消失”的效果 */ @keyframes dash { 0% { stroke-dasharray: 1 340; /* 描边很短，几乎看不见 */ stroke-dashoffset: 170; } 50% { stroke-dasharray: 170 340; /* 描边显示一半圆 */ stroke-dashoffset: 0; /* 描边完全显示在预期位置 */ } 100% { stroke-dasharray: 170 340; stroke-dashoffset: -170; /* 描边继续移动，直到完全移出视野 */ } } /* 旋转动画：让整个SVG元素持续旋转 */ @keyframes rotate { 100% { transform: rotate(270deg); /* 从 -90deg 旋转 360 度到 270deg */ } }
这段代码实现了一个经典的加载动画，它通过同时动画
stroke-dashoffset
和
transform: rotate
，让描边的一部分看起来在圆周上“追逐”自己。
stroke-dasharray
stroke-dasharray
和
stroke-dashoffset
究竟是怎么配合工作的？
这玩意儿初看有点绕，但一旦你理解了它就像在玩一场线条的“捉迷藏”游戏。简单来说，
stroke-dasharray
决定了你的描边是由多长的一段段实线（dash）和多长的一段段空白（gap）组成的。你可以把它想象成一条印有虚线图案的卷尺。比如
stroke-dasharray: 10 5
，就是10个单位的实线，接着5个单位的空白，然后重复。如果你只给一个值，比如
stroke-dasharray: 10
，那它就是10个单位实线，10个单位空白，交替出现。
而
stroke-dashoffset
呢，它就是这条“虚线卷尺”的起始点。默认情况下，这条卷尺是从路径的起点（比如圆的最右侧点，或者你用
transform: rotate(-90deg)
调整后的最顶部）开始铺设的。
stroke-dashoffset
的值就是把这条卷尺的起始点沿着路径移动多少距离。一个正值会把图案“往回”推（在圆上通常是逆时针），负值则会“往前”推（顺时针）。
所以，当你在动画中把
stroke-dashoffset
从一个很大的值（比如等于或大于路径总长）逐渐减小到0时，原本隐藏的描边就会慢慢“显形”，看起来就像在填充。而如果
stroke-dasharray
定义了一个固定长度的短描边和长空白，再结合
stroke-dashoffset
的持续变化，你就会看到那个短描边在路径上“滑动”，这正是我们上面加载动画的核心原理。它俩的配合，就像魔术师手中的道具，看似简单，组合起来却能变幻出无穷的视觉效果。
如何让进度环动画看起来更流畅、更专业？
光是能动起来还不够，我们总是希望动画能给人一种“丝滑”的感觉，显得更高级。这里有几个可以深入挖掘的点：
首先，是动画的缓动函数（
animation-timing-function
）。我以前也犯过只用
linear
的毛病，结果动画生硬得像机器人跳舞。
linear
固然简单，但它意味着动画速度恒定，缺乏自然感。尝试使用
ease-in-out
会让动画在开始和结束时都有一个加速和减速的过程，看起来更柔和。如果想更精确控制，
cubic-bezier()
函数能让你自定义缓动曲线，比如
cubic-bezier(0.65, 0.05, 0.36, 1)
就能模拟出非常漂亮的加速减速效果。
其次，
stroke-linecap
属性。给
spinner-progress
设置
stroke-linecap: round;
会让描边的两端变得圆润，而不是默认的方形。这个小细节能瞬间提升动画的质感，让它看起来不那么“硬朗”，更符合现代UI的设计趋势。
再来，考虑多层叠加或更复杂的动画组合。我们现在是一个背景环加一个前景进度环。你甚至可以再加一个SVG元素，或者利用伪元素，来制作更复杂的光影效果，或者在进度环的末端加上一个小圆点，让它看起来像一个“头部”在移动。这通常涉及到更多SVG元素的层叠和各自的动画。
最后，别忘了可访问性。对于加载动画，虽然它主要是视觉提示，但对屏幕阅读器用户来说，提供文本说明很重要。可以在SVG元素外层添加
aria-live="polite"
，并在其内部放置一个
<span>
元素，通过CSS隐藏但对屏幕阅读器可见，显示“正在加载中…”这样的文字。或者，如果进度是可量化的，使用
aria-valuemin
,
aria-valuemax
,
aria-valuenow
等属性，通过JavaScript动态更新
aria-valuenow
的值，提供更具体的进度信息。这些虽然不是直接控制动画，但却是让动画“专业”起来不可或缺的一环。
进度环动画在实际项目中还有哪些变体和应用场景？
进度环动画远不止一个简单的加载指示器那么单一，它在实际项目中有着非常广泛且灵活的应用。想想看，这不仅仅是个加载动画，它简直是个小型的UI魔术师！
最常见的当然是数据加载或处理时的等待提示。无论是页面跳转前的全屏加载，还是表单提交后的局部等待，一个优雅的进度环都能有效缓解用户的焦虑。比方说，当用户上传一个大文件时，你可以用JavaScript实时更新
stroke-dashoffset
来反映上传的百分比，让它从空心逐渐填满，直观地展示上传进度。
它还可以作为交互元素的反馈。比如一个下载按钮，点击后按钮内部就变成一个加载环，下载完成后再变回一个“完成”的图标。这种内联的加载动画，既节省了空间，又提供了即时反馈。
在数据可视化方面，进度环也大有用武之地。想想仪表盘上的小部件，它们可以用进度环来显示某个指标的完成度，比如任务完成率、磁盘使用率、用户活跃度等。通过不同的颜色和大小，一个简单的环形就能传达丰富的信息。你甚至可以制作多个同心圆，每个圆代表一个不同的数据维度，形成一个小型的信息图表。
更进一步，我们不一定非要局限于圆形。
stroke-dasharray
和
stroke-dashoffset
是SVG路径通用的属性，这意味着你可以将它们应用到任何SVG路径上。比如，你可以绘制一个自定义的形状（星形、心形），然后让它的描边像进度条一样填充。或者，在地图应用中，让一条路线的描边逐渐“绘制”出来，模拟导航路径的出现。
结合JavaScript，它的潜力更是被无限放大。你可以根据后端返回的实时进度数据，动态地计算并设置
stroke-dashoffset
的值，从而实现一个真正的、精确到百分比的进度条。这种动态更新的能力，让纯CSS的静态动画变得鲜活起来，真正融入到复杂的应用逻辑中去。可以说，掌握了
stroke-dashoffset
，你就掌握了SVG动画的一把万能钥匙。
评论（已关闭）
评论已关闭