js css画圆环进度条

要在网页中使用 JavaScript 和 CSS 绘制一个圆环进度条，可以利用 HTML5 的 <canvas> 元素或者纯 CSS 结合 SVG 来实现。下面将介绍一种使用纯 CSS 和 SVG 实现圆环进度条的方法，并附带相关代码示例。

基本概念

圆环进度条通常由两个同心圆组成，外层为进度条的背景，内层根据进度动态变化，显示当前的完成度。通过调整内层圆的旋转角度或宽度，可以实现进度的可视化效果。

优势

响应式设计：基于 CSS 和 SVG，能够自适应不同屏幕尺寸。
性能高效：相比使用图片或复杂的动画，CSS 和 SVG 更加轻量，渲染性能更好。
易于定制：可以通过修改 CSS 样式轻松调整颜色、大小、动画速度等。

类型

基于 SVG 的圆环进度条：利用 SVG 的路径和动画实现。
基于 CSS 动画的圆环进度条：通过伪元素和旋转动画实现。

应用场景

数据可视化：展示加载进度、完成度等。
用户界面元素：如仪表盘、进度指示器等。
营销页面：吸引用户注意力的动态效果。

实现方法

以下是使用纯 CSS 和 SVG 实现圆环进度条的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>圆环进度条示例</title>
<style>
  .progress-container {
    position: relative;
    width: 150px;
    height: 150px;
  }
  
  .progress-container svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
  }
  
  .progress-container circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
  }
  
  .progress-container .background {
    stroke: #eee;
  }
  
  .progress-container .progress {
    stroke: #007bff;
    stroke-dasharray: 471; /* 2 * π * r (r=50) */
    stroke-dashoffset: 471;
    animation: draw 3s linear forwards;
  }
  
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>
</head>
<body>

<div class="progress-container">
  <svg viewBox="0 0 100 100">
    <circle class="background" cx="50" cy="50" r="50"></circle>
    <circle class="progress" cx="50" cy="50" r="50"></circle>
  </svg>
</div>

</body>
</html>

代码说明

HTML 结构：
- 一个包含 SVG 的容器 .progress-container。
- SVG 内有两个 <circle> 元素，分别代表背景圆环和进度圆环。

CSS 样式：
- 设置容器的大小和位置。
- 旋转 SVG 以便进度从顶部开始。
- 定义背景圆环的颜色和样式。
- 定义进度圆环的颜色、线宽、线帽样式。
- 使用 stroke-dasharray 和 stroke-dashoffset 控制进度显示。
- 定义关键帧动画 draw，使进度圆环逐渐填充。

可定制性

颜色：修改 .progress 类中的 stroke 属性即可更改进度条颜色。
大小：调整 .progress-container 的 width 和 height，以及 SVG 中圆的 r 属性。
动画速度：修改 animation: draw 3s linear forwards; 中的 3s 来调整动画时长。

常见问题及解决方法

进度条不显示或显示不正确：
- 确保 stroke-dasharray 的值等于圆的周长（2 * π * r）。
- 检查 SVG 的 viewBox 是否正确设置，确保圆环在可视范围内。

动画不流畅：
- 使用 will-change: transform; 或 transform: translateZ(0); 来优化动画性能。
- 确保浏览器支持 CSS 动画和 SVG 属性。
响应式设计问题：
- 使用相对单位（如百分比）设置容器和 SVG 的尺寸。
- 使用媒体查询根据不同屏幕尺寸调整样式。