js+css 实现一个动态的球形进度条

好的，以下是一个简单的实现方法：

HTML代码：

<div class="progress">
  <div class="progress__bar"></div>
  <div class="progress__value"></div>
</div>

CSS代码：

.progress {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid #ddd;
  background-color: #f7f7f7;
  overflow: hidden;
}

.progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #00c853;
  clip: rect(0, 100px, 200px, 0);
  transform-origin: center center;
  transform: rotate(-90deg);
  animation: progress 5s linear forwards;
}

.progress__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
  color: #333;
}

@keyframes progress {
  0% {
    transform: rotate(-90deg);
    clip: rect(0, 100px, 200px, 0);
  }
  50% {
    transform: rotate(90deg);
    clip: rect(0, 200px, 200px, 100px);
  }
  100% {
    transform: rotate(270deg);
    clip: rect(0, 200px, 200px, 0);
  }
}

JavaScript代码：

var progressValue = 25; // 进度值，范围为0-100

var progressBar = document.querySelector('.progress__bar');
var progressValueElem = document.querySelector('.progress__value');

progressBar.style.animationDuration = progressValue / 100 * 5 + 's';
progressValueElem.textContent = progressValue + '%';

在这个实现中，我们使用了CSS3的clip属性来实现圆形进度条的效果，同时使用了JavaScript动态设置进度条的动画时长和进度值文本。你可以根据自己的需求修改代码来实现不同的效果。