CSS环形进度条制作教程

最直接且推荐的方法，就是利用父容器的Flexbox布局能力：

.circle-chart {
  /* ...其他样式... */
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中子项 */
  justify-content: center; /* 水平居中子项 */
  /* ... */
}

.circle-chart .chart-text {
  /* 文本样式，如字体大小、颜色等 */
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  /* 确保文本内容不会被背景渐变覆盖，可以给它一个白色背景 */
  background-color: white;
  border-radius: 50%; /* 让文本区域也呈圆形，增加视觉效果 */
  /* 根据需要调整文本区域的大小，确保能覆盖中心部分 */
  width: calc(var(--size) * 0.7); /* 文本区域大小，比图表小一点 */
  height: calc(var(--size) * 0.7);
  display: flex; /* 再次启用Flexbox，确保文本本身在其中央 */
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* 加点阴影，让它浮起来 */
}

这里，父容器.circle-chart被设置为display: flex;并使用了align-items: center;和justify-content: center;，这会将其唯一的子元素（即.chart-text）完美地放置在容器的中心。

同时，.chart-text自身也被设置为display: flex;并居中其内容，这确保了百分比数字本身在chart-text这个小圆圈里也是居中的。给chart-text一个background-color: white;和border-radius: 50%;非常关键，它能创建一个白色的圆形区域，覆盖掉conic-gradient的中心部分，让百分比数字清晰可见，同时保持了整体的圆形美感。

这种方法的好处是，无论图表大小如何变化，或者文本内容是两位数还是三位数，它都能自动适应并保持居中，非常健壮。

动画效果与无障碍性：提升用户体验的额外考量

一个静态的百分比图表已经很棒了，但如果能加入一些动画，或者确保它对所有用户都可用，那才是真正提升用户体验的关键。

动画效果：

坦白说，直接对conic-gradient的background属性进行transition动画，效果通常不尽如人意，因为conic-gradient本身是图像属性，它的渐变变化通常是跳跃式的，而不是平滑的。如果你尝试直接对--percentage这个CSS变量进行transition，你会发现它并不能让conic-gradient平滑过渡。这是CSS动画的一个限制。

不过，我们并非没有办法。一种常见的“欺骗”方式是：

1. 分层动画：使用两个伪元素（::before和::after）或者两个背景层。一个伪元素作为底部的背景圆，另一个作为百分比圆，然后通过transform: rotate()来旋转它们。但这种方法对于百分比图表来说，实现起来会比conic-gradient复杂很多，尤其是在处理百分比小于50%和大于50%时的逻辑。
2. JavaScript驱动：这是最可靠也最平滑的动画方式。通过JavaScript，我们可以编写一个函数，在设定的时间内，逐步增加或减少--percentage变量的值。例如，从0%到目标百分比，每隔几十毫秒更新一次--percentage。

// 示例：JavaScript驱动的动画
function animatePercentage(element, targetPercentage, duration = 1000) {
  let startPercentage = parseFloat(element.style.getPropertyValue('--percentage')) || 0;
  let startTime = null;

  function animate(currentTime) {
    if (!startTime) startTime = currentTime;
    const progress = (currentTime - startTime) / duration;

    if (progress < 1) {
      const currentPercentage = startPercentage + (targetPercentage - startPercentage) * progress;
      element.style.setProperty('--percentage', currentPercentage.toFixed(2));
      requestAnimationFrame(animate);
    } else {
      element.style.setProperty('--percentage', targetPercentage);
    }
  }
  requestAnimationFrame(animate);
}

// 使用示例：
// const chart = document.querySelector('.circle-chart');
// animatePercentage(chart, 90, 1500); // 动画到90%，持续1.5秒

这种JS驱动的方式虽然增加了JS代码量，但能提供非常流畅且可控的动画效果，用户体验会好很多。

无障碍性（Accessibility）：

确保你的图表对所有用户，包括使用屏幕阅读器或有视觉障碍的用户，都是可访问的，这非常重要。仅仅依靠视觉效果是不够的。

1. 语义化HTML：虽然我们用div和span，但可以给它们添加ARIA属性，让屏幕阅读器理解它们的含义。

   • 给图表容器添加role="progressbar"：这告诉屏幕阅读器这是一个进度条。
   • 使用aria-valuenow、aria-valuemin和aria-valuemax：分别表示当前值、最小值和最大值。

   <div class="circle-chart" style="--percentage: 75;"
        role="progressbar"
        aria-valuenow="75"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-label="任务完成进度">
     <span class="chart-text">75%</span>
   </div>

   当百分比更新时，记得同时用JavaScript更新aria-valuenow的值。

2. 视觉替代文本：即使有文本显示在图表中心，也可以考虑在图表外部提供一个屏幕阅读器可见但视觉上隐藏的文本，或者确保中心显示的文本是可读的。

3. 颜色对比度：确保百分比颜色和背景颜色之间有足够的对比度，以便色盲或视力不佳的用户也能清晰地区分。可以使用WCAG（Web Content Accessibility Guidelines）推荐的对比度工具来检查。

通过这些额外的考量，我们不仅创建了一个功能强大的动态图表，也确保了它能够为更广泛的用户群体提供良好的体验。

本篇关于《CSS环形进度条制作教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！