CSS环形进度条动画教程详解
时间:2025-07-29 09:29:49 501浏览 收藏
你在学习文章相关的知识吗?本文《CSS动画绘制环形进度条教程》,主要介绍的内容就涉及到,如果你想提升自己的开发能力,就不要错过这篇文章,大家要知道编程理论基础和实战操作都是不可或缺的哦!
SVG进度环形图的核心是利用circle元素的stroke-dasharray和stroke-dashoffset属性协同控制线条显示长度,通过CSS动画改变stroke-dashoffset从周长值过渡到计算后的剩余偏移量,实现进度填充效果;2. 为适配不同半径的环形图,推荐使用CSS自定义属性定义半径并结合calc()动态计算周长,也可用JavaScript读取r属性实时设置变量或样式;3. 除线性进度外,CSS动画还能实现缓动函数变化、颜色渐变、宽度波动、阴影光晕、旋转起始点、数字跳动、图标切换及背景轨迹动画等创意效果,提升视觉表现力。
使用CSS动画绘制SVG进度环形图,核心在于巧妙利用SVG的circle
元素以及CSS的stroke-dasharray
和stroke-dashoffset
属性,配合@keyframes
动画来控制线条的显示与隐藏,从而模拟出进度填充的效果。这比想象中要灵活和强大,能做出非常流畅且富有表现力的动画。

解决方案
要实现一个动态的SVG进度环形图,我们通常会用到两个SVG circle
元素:一个作为背景轨迹,另一个则用于显示进度。关键在于通过CSS来控制进度圆的stroke-dasharray
和stroke-dashoffset
属性。
首先,在HTML中定义SVG结构:

0%
接着,是CSS部分。这里面藏着实现动画的秘密:
.progress-circle-container { width: 150px; height: 150px; position: relative; display: flex; justify-content: center; align-items: center; } .progress-circle { transform: rotate(-90deg); /* 让进度从顶部开始 */ width: 100%; height: 100%; } .progress-circle-track { fill: none; stroke: #e6e6e6; stroke-width: 10; } .progress-circle-bar { fill: none; stroke: #4CAF50; /* 进度条颜色 */ stroke-width: 10; stroke-linecap: round; /* 圆头效果,让进度条末端更平滑 */ /* 这里的计算是关键:2 * PI * r = 2 * 3.14159 * 45 ≈ 282.74 */ /* 我们用一个变量来存储周长,方便后续计算 */ --circumference: calc(2 * 3.14159 * 45); /* 假设半径是45 */ stroke-dasharray: var(--circumference); /* 完整的圆周长 */ stroke-dashoffset: var(--circumference); /* 初始时完全隐藏进度条 */ transition: stroke-dashoffset 1s ease-out; /* 平滑过渡动画 */ /* 或者通过 @keyframes 动画来控制 */ /* animation: fill-progress 2s forwards ease-in-out; */ } /* 如果要通过 JS 动态设置进度,可以直接修改 --progress 变量 */ /* 例如:.progress-circle-bar { stroke-dashoffset: calc(var(--circumference) * (1 - var(--progress, 0))); } */ /* 如果使用 @keyframes 动画 */ @keyframes fill-progress { from { stroke-dashoffset: var(--circumference); } to { /* 假设进度是 75% */ stroke-dashoffset: calc(var(--circumference) * (1 - 0.75)); } } .progress-text { position: absolute; font-size: 1.5em; font-weight: bold; color: #333; }
这段CSS里,--circumference
是一个CSS变量,存储了圆的周长。stroke-dasharray
设置成周长,意味着我们有一条和圆周长一样长的虚线段,后面跟着一个0长度的空白。stroke-dashoffset
则控制这条虚线段的起始偏移量。当stroke-dashoffset
等于周长时,整条虚线被“推”出视图,所以什么也看不到。当它逐渐减小到0时,虚线就完全显示出来,形成一个完整的圆。通过计算calc(var(--circumference) * (1 - 进度百分比))
,我们就能精确控制进度条的显示长度。

SVG中的stroke-dasharray
和stroke-dashoffset
如何协同工作实现进度动画?
在我看来,stroke-dasharray
和stroke-dashoffset
是SVG线条绘制里最富有魔力的两个属性,它们协同作用,能把一条连续的线段玩出各种花样,尤其是实现这种动态进度条。
简单来说,stroke-dasharray
定义了虚线(dash)和间隔(gap)的序列。你可以给它一个或多个数值。如果只给一个值,比如stroke-dasharray: 10
,那就意味着10个单位的虚线,然后是10个单位的空白,如此循环。但对于进度条,我们通常只给一个值:圆的周长。比如,一个半径为45的圆,周长大约是282.74。那么stroke-dasharray: 282.74
就表示有一条282.74单位长的实线,后面紧跟着一个0单位的空白。这样,理论上这条线就是连续的,因为它没有实际的“间隔”。
而stroke-dashoffset
则更像是一个“卷尺”,它控制着这条虚线模式的起始点。想象一下,你有一条无限长的、由虚线和空白组成的图案带子。stroke-dashoffset
就是让你把这条带子从某个位置开始“贴”到你的SVG路径上。当stroke-dashoffset
的值等于stroke-dasharray
定义的虚线长度时,这意味着你把这条“实线段”完全推到了路径的起点之外,所以你看不到它。
比如,周长是282.74,你设置stroke-dasharray: 282.74
和stroke-dashoffset: 282.74
。此时,这条实线段的起点被偏移了282.74单位,刚好完全隐藏了。当你把stroke-dashoffset
从282.74动画到0时,这条实线段就从路径的起点开始,逐渐“展开”直到完全显示出来。如果目标是50%的进度,那stroke-dashoffset
就应该动画到282.74 * (1 - 0.5)
,也就是141.37
,这样就只显示了一半的圆。
这种机制的巧妙之处在于,我们并不是真的在“画”线,而是在“揭示”一条已经存在的线。通过控制偏移量,我们能精确地控制这条线的哪一部分是可见的,从而创造出进度条从无到有的视觉效果。
如何确保不同半径的环形图都能正确显示进度动画?
这确实是个实际开发中会遇到的问题。如果你有多个不同大小的进度环,每次都手动去计算周长并写死在CSS里,那简直是噩梦。我的经验是,有几种方法可以优雅地处理这个问题,让不同半径的环形图都能正确且灵活地显示进度动画。
CSS自定义属性(CSS Variables)与
calc()
的结合: 这是我个人最推荐的方式,因为它保持了CSS的纯粹性,并且非常灵活。我们可以在CSS中定义一个变量来存储圆的半径,然后通过calc()
函数来计算周长,并将其应用于stroke-dasharray
和stroke-dashoffset
。.progress-circle-bar { --radius: 45; /* 定义半径变量 */ --circumference: calc(2 * 3.14159 * var(--radius)); /* 计算周长 */ stroke-dasharray: var(--circumference); stroke-dashoffset: var(--circumference); /* ... 其他样式 ... */ } /* 针对特定大小的环形图,只需覆盖 --radius 变量 */ .progress-circle-large .progress-circle-bar { --radius: 60; } @keyframes fill-progress { from { stroke-dashoffset: var(--circumference); } to { stroke-dashoffset: calc(var(--circumference) * (1 - 0.75)); } }
这样,你只需要在不同的容器或元素上修改
--radius
变量,所有相关的计算都会自动更新。这极大地提高了代码的可维护性和复用性。JavaScript动态计算和设置: 如果你的环形图半径是完全动态的,比如用户可以拖动滑块改变大小,或者数据驱动导致半径不确定,那么JavaScript就成了不可或缺的工具。你可以通过JS获取SVG
circle
元素的半径(r
属性),计算出周长,然后将stroke-dasharray
和stroke-dashoffset
的值直接设置到元素的style
属性上,或者更新CSS自定义属性。const progressBar = document.querySelector('.progress-circle-bar'); const radius = parseFloat(progressBar.getAttribute('r')); // 获取半径 const circumference = 2 * Math.PI * radius; progressBar.style.setProperty('--circumference', circumference); // 假设要设置 75% 进度 const progress = 0.75; progressBar.style.strokeDashoffset = circumference * (1 - progress);
这种方式虽然引入了JS,但它提供了最大的灵活性,能够应对各种复杂的动态场景。
SVG
viewBox
与相对单位的结合(有限制): 虽然SVG的viewBox
属性可以帮助SVG在不同容器大小下进行缩放,但stroke-dasharray
和stroke-dashoffset
的值仍然是基于用户单位的。也就是说,如果你把viewBox
设为0 0 100 100
,并且圆的半径是45,那么周长就是2 * PI * 45
。即使你把SVG容器放大两倍,这个圆在视觉上变大了,但它的“内部”计算单位仍然是基于100x100的viewBox
。所以,这种方法并不能直接解决stroke-dasharray
和stroke-dashoffset
的动态计算问题,但它能确保SVG整体的缩放比例正确。通常,它会和CSS变量或JS计算结合使用。
在我看来,CSS自定义属性是目前最优雅且纯CSS的解决方案,它在不引入JS的情况下,提供了相当高的灵活性。当需要更复杂的动态交互时,再考虑引入JavaScript进行辅助计算。
除了简单的线性进度,CSS动画还能为环形图带来哪些创意效果?
CSS动画在环形进度图上能做的远不止从0到100%的线性填充。通过一些巧妙的组合和对动画属性的深入理解,我们可以为用户带来更生动、更富有表现力的视觉体验。
非线性缓动效果(Easing Functions): 最直接的升级就是改变
animation-timing-function
。默认的ease
可能有点平淡,但你可以尝试ease-in-out
让进度条先慢后快再慢,或者使用cubic-bezier()
自定义一个更具弹性的效果。比如,一个cubic-bezier(.17,.67,.83,.67)
可能会让进度条在最后“弹跳”一下,模拟出一种完成的喜悦感。这就像在说:“我完成了,而且完成得很漂亮!”多层动画与叠加效果: 我们可以不止动画一个
circle
。比如:- 颜色渐变: 随着进度条的填充,同时动画
stroke
的颜色,从红色(低进度)渐变到绿色(高进度)。 - 宽度变化: 让进度条的
stroke-width
在动画过程中逐渐变宽或变窄,制造出一种“成长”或“收敛”的视觉效果。 - 阴影/光晕: 在进度条完成时,给它添加一个
box-shadow
或filter: drop-shadow()
的动画,让它像被点亮了一样,或者发出微弱的光晕,强调完成状态。
- 颜色渐变: 随着进度条的填充,同时动画
起始点与结束点的动态变化: 除了
stroke-dashoffset
,我们也可以动画transform: rotate()
来改变进度条的起始点。比如,让进度条在填充的同时,整个环形图缓慢旋转,增加视觉趣味性。或者,在进度完成时,让进度条的末端有一个小小的“收尾”动画,比如短暂地变细或闪烁一下。文本或图标的联动动画: 进度条内部通常会显示百分比数字。我们可以让这个数字也动起来:
- 数字跳动: 随着进度条的填充,数字从0快速跳变到目标值,而不是简单的静态显示。
- 字体大小/颜色变化: 进度完成时,数字可以放大、加粗或变色,突出最终结果。
- 图标切换: 当进度达到100%时,将百分比数字替换成一个“完成”的打钩图标,并伴随一个缩放或淡入动画。
背景轨迹的动画: 不只是进度条,背景轨迹也可以动。比如,让背景轨迹在加载初期有一个短暂的淡入或绘制动画,然后再开始填充进度条,这样整个加载过程会显得更有层次感。
这些创意效果的实现,往往不需要复杂的JavaScript,很多时候纯CSS的@keyframes
和transition
就能搞定。关键在于跳出“单纯显示进度”的思维定式,把环形图看作一个可以进行多维度视觉表达的画布。
今天关于《CSS环形进度条动画教程详解》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于CSS动画,SVG,环形进度条,stroke-dashoffset,stroke-dasharray的内容请关注golang学习网公众号!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
431 收藏
-
209 收藏
-
267 收藏
-
450 收藏
-
294 收藏
-
148 收藏
-
237 收藏
-
443 收藏
-
478 收藏
-
265 收藏
-
428 收藏
-
135 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习