环形进度条动起来并显示实时数据的方法是通过javascript动态更新css自定义属性–progress的值，并配合css transition实现动画效果。具体步骤如下：1. 使用setinterval或requestanimationframe定期更新进度值；2. 通过element.style.setproperty(‘–progress’, ${percentage}%)修改css变量；3. 同步更新中心文本内容以显示当前百分比；4. 利用css的transition属性实现平滑动画过渡；5. 在实际应用中，将percentage替换为来自api、用户操作或计算结果的动态数据。
在CSS中创建环形进度条，最直接且现代的方式是利用conic-gradient（圆锥渐变）属性。它能让我们以一个中心点为起点，沿着圆周方向绘制颜色渐变，这完美契合了环形进度条的视觉需求。配合一个内部元素来遮盖中心，就能轻松形成一个“甜甜圈”状的进度条。
解决方案
要实现一个基本的环形进度条，我们通常需要一个外层容器和一个内层元素。外层容器负责绘制进度，内层元素则用来创建中心空白区域。
50%
.progress-circle { position: relative; width: 150px; /* 进度条的尺寸 */ height: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; /* 默认背景，可以是进度条未完成的部分颜色，或者透明 */ background: #e0e0e0; /* 示例：未完成部分的颜色 */ /* 关键：使用 conic-gradient 绘制进度 */ /* --progress 变量将通过 JavaScript 更新 */ background: conic-gradient(#4CAF50 var(--progress, 0%), #e0e0e0 var(--progress, 0%));}.progress-inner { width: 120px; /* 内部圆的尺寸，比外部小，形成环形 */ height: 120px; background-color: #ffffff; /* 内部圆的背景色，通常是白色或与页面背景色一致 */ border-radius: 50%; position: absolute; /* 确保它在外部圆的中心 */ z-index: 1; /* 确保它在进度条上方 */}.progress-text { position: absolute; z-index: 2; /* 确保文本在最上层 */ font-size: 1.5em; font-weight: bold; color: #333;}
这段CSS里，--progress 是一个CSS自定义属性（变量），它控制着conic-gradient中第一个颜色（绿色）的停止位置。当--progress设置为50%时，绿色会填充一半的圆周；设置为100%时，则会填满整个圆。progress-inner通过覆盖中心部分，巧妙地将实心圆变成了环形。这种方法简洁高效，比以前用多个div旋转再裁剪要优雅太多了。
立即学习“前端免费学习笔记（深入）”；
如何让环形进度条动起来并显示实时数据？
让环形进度条动起来，核心在于动态改变CSS自定义属性--progress的值，并通过JavaScript来驱动这个变化。实时数据显示则是在进度条中心添加一个文本元素，并随进度更新其内容。
function updateProgressBar(elementSelector, percentage) { const progressBar = document.querySelector(elementSelector); if (!progressBar) return; // 更新CSS变量，触发 conic-gradient 变化 progressBar.style.setProperty('--progress', `${percentage}%`); // 更新文本显示 const progressText = progressBar.querySelector('.progress-text'); if (progressText) { progressText.textContent = `${Math.round(percentage)}%`; } // 如果需要动画效果，可以利用 requestAnimationFrame 或 CSS transition // 这里我们主要依靠 CSS transition 来平滑过渡 // 假设 .progress-circle 上有 transition: background 0.5s ease-out;}// 示例：每秒更新一次进度let currentProgress = 0;const interval = setInterval(() => { currentProgress += 5; if (currentProgress > 100) { currentProgress = 0; // 循环演示 } updateProgressBar('.progress-circle', currentProgress);}, 200);// 别忘了在 .progress-circle 上添加 CSS transition 属性，让变化平滑// .progress-circle {// transition: background 0.5s ease-out; /* 让进度条变化有动画效果 */// }
这里我们用setInterval模拟了一个数据更新的场景。在实际应用中，percentage的值可能来自API调用、用户操作或者某个计算结果。关键是，当--progress这个CSS变量的值发生变化时，如果你的.progress-circle元素上设置了transition属性（比如transition: background 0.5s ease-in-out;），那么进度条的填充动画就会自动、平滑地呈现出来。这种分离关注点的方式，让JS只负责数据和状态，CSS负责表现和动画，是我个人非常推崇的实践。
在不同浏览器和设备上，环形进度条的兼容性如何保障？
关于兼容性，conic-gradient在现代浏览器中的支持度已经相当不错了。主流的桌面和移动浏览器（Chrome, Firefox, Safari, Edge）都提供了良好的支持。这几年下来，它的普及率已经很高，日常开发基本可以放心使用。
然而，我们总要考虑一些极端情况或者特定用户群体：
旧版浏览器支持： 如果你的项目必须支持IE等非常老的浏览器，那么conic-gradient显然是行不通的。在这种情况下，可能需要考虑使用SVG（可伸缩矢量图形）来实现环形进度条。SVG的circle和stroke-dasharray属性提供了非常强大的控制能力，可以完美模拟出环形进度条的效果，并且兼容性极佳。不过，这会引入SVG的XML结构，增加了HTML的复杂度，也意味着CSS可能需要配合SVG的属性进行样式控制。
响应式设计： 对于不同尺寸的设备，确保进度条能自适应布局至关重要。
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情 相对单位： 使用em、rem或vw（视口宽度）/vh（视口高度）等相对单位来定义进度条的尺寸，而不是固定的px。例如，将width和height设置为10vw，这样进度条会随着屏幕宽度的变化而缩放。Flexbox/Grid布局： 将进度条放置在Flexbox或Grid容器中，利用这些布局系统的强大对齐和分配空间能力，确保进度条在各种布局中都能保持正确的居中和位置。
无障碍性（Accessibility）： 这一点常常被忽视，但对于提升用户体验至关重要。
ARIA属性： 对于屏幕阅读器用户，仅仅看到视觉上的进度条是不够的。我们应该在.progress-circle元素上添加ARIA属性，如role="progressbar"，以及aria-valuenow（当前值）、aria-valuemin（最小值，通常是0）、aria-valuemax（最大值，通常是100）。例如：
aria-valuenow的值。文本替代： 确保进度条内部的百分比文本是可见且可读的，或者提供一个隐藏的、仅供屏幕阅读器读取的文本描述。
总的来说，conic-gradient在现代Web开发中已经足够健壮。若有特殊兼容性需求，SVG是可靠的备选方案。而响应式和无障碍性则是任何UI组件都应考虑的普适性问题。
除了基本的进度显示，环形进度条还能有哪些创意和交互式应用？
环形进度条远不止是显示一个简单的百分比。它的圆形结构和渐变特性，为数据可视化和用户交互提供了丰富的可能性。
多段式进度展示： 想象一个任务有多个子阶段，或者一个项目由不同类型的工作组成。你可以通过使用多个conic-gradient层叠或更复杂的background组合，来在同一个环形进度条上展示不同阶段的完成度，每段用不同的颜色表示。比如，一个下载任务可能分为“准备”、“下载中”、“验证”等阶段，每个阶段在环上占据相应比例并用不同颜色区分。这比多个独立的进度条要紧凑得多。
交互式数据探索： 结合JavaScript事件监听，环形进度条的各个部分可以变得可点击或可悬停。例如，在一个展示不同类别数据占比的环形图中，用户点击某个扇区时，可以触发详细信息的弹出框，或者筛选相关数据。悬停时显示该部分的具体数值或名称，这能显著提升用户对数据的理解和探索效率。
动态仪表盘元素： 在数据仪表盘中，环形进度条可以作为关键性能指标（KPI）的直观呈现。例如，显示CPU使用率、内存占用、项目完成度、用户活跃度等。通过动态更新数据，用户可以实时监控系统或业务状态。结合动画效果，如当指标达到某个阈值时，进度条颜色变为警告色，或者伴随一个轻微的脉冲动画，能更好地引起用户的注意。
加载动画与状态反馈： 在等待数据加载或处理时，一个循环旋转的环形进度条（可以是一个无限循环的conic-gradient动画）能提供良好的视觉反馈，避免用户以为页面卡死。当加载完成后，这个旋转的环形可以平滑地过渡到显示实际进度的环形条，这种过渡动画能带来更流畅的用户体验。
自定义形状与纹理： 虽然CSS的conic-gradient主要是线性的颜色渐变，但通过结合mask属性或者更复杂的背景图片，你可以为环形进度条添加独特的纹理、阴影或发光效果，使其更具设计感。比如，一个带有毛边效果的进度条，或者一个边缘有光晕的能量环。
这些高级应用，往往需要CSS、JavaScript和HTML的紧密协作。CSS负责基础样式和动画，JavaScript负责数据逻辑和交互事件，HTML则提供结构。这种分工协作，使得环形进度条从一个简单的UI元素，蜕变为一个功能强大且富有表现力的数据可视化工具。
以上就是CSS中如何创建数据仪表盘—环形进度条实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1103662.html
微信扫一扫
支付宝扫一扫
