CSS3：打造动态圆环进度条，让数据可视化更直观！

2023-10-09 09:22:05

CSS3 圆环进度条制作

1. HTML 结构

首先，我们需要创建一个HTML结构来容纳我们的圆环进度条。这个结构可以是一个<div>元素，也可以是一个<canvas>元素。我们这里使用<div>元素。

<div id="progress-bar"></div>

2. CSS 样式

接下来，我们需要使用CSS来定义圆环进度条的样式。

#progress-bar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #efefef;
  position: relative;
}

#progress-bar .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #000;
  clip: rect(0, 100px, 200px, 0);
  transform: rotate(180deg);
  animation: progress 2s linear infinite;
}

@keyframes progress {
  0% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

3. JavaScript 控制

最后，我们可以使用JavaScript来控制圆环进度条的进度。

var progressBar = document.getElementById("progress-bar");
var progress = document.querySelector("#progress-bar .progress");

function updateProgress(percent) {
  progress.style.clip = `rect(0, ${percent * 100}px, 200px, 0)`;
}

updateProgress(0.5); // 设置进度为50%