怎样才能做一个圆圈进度条？

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

.progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f2f2f2;
  position: relative;
}

.progress {
  width: 50%;
  height: 100%;
  border-radius: 50%;
  background-color: #ff0000;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 0.8s ease-in-out;
}

function setProgress(percent) {
  const progress = document.querySelector('.progress');
  progress.style.transform = `rotate(${percent * 3.6}deg)`;
}

setProgress(75); // 设置进度为75%