css+js实现 环形进度条

可以使用CSS和JavaScript来实现环形进度条。下面是一个简单的实现方式：

HTML代码：

<div class="progress-ring">
  <div class="progress-bar"></div>
  <div class="percent"></div>
</div>

CSS代码：

.progress-ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 50px, 100px, 0);
  background-color: #fff;
  transform: rotate(-90deg);
}

.percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
}

/* 设置进度条颜色 */
.progress-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip: rect(0, 50px, 100px, 0);
  background-color: #2196f3;
  transform: rotate(-90deg);
}

/* 设置进度条动画 */
@keyframes progress-animation {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}

.progress-bar:before {
  animation: progress-animation 2s ease-in-out forwards;
}

/* 设置百分比样式 */
.percent:before {
  content: attr(data-percent) "%";
}

JavaScript代码：

// 获取进度条元素
var progressRing = document.querySelector(".progress-ring");
// 获取进度条百分比元素
var percent = progressRing.querySelector(".percent");
// 设置进度条百分比
percent.setAttribute("data-percent", "50");

使用这份代码，你会得到一个带有50%进度的环形进度条。你可以通过JavaScript来动态地改变进度条的百分比，例如：

percent.setAttribute("data-percent", "80");

这会将进度条的百分比改为80%。