/* 环形进度外层容器 */
.audio-progress-circle {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 5px;
}
/* 底层圆环 */
.circle-bg {
  fill: none;
  stroke: #e5e6eb;
  stroke-width: 6;
}
/* 进度圆环 */
.circle-progress {
  fill: none;
  stroke: #2d8cf0;
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center center;
  transition: stroke-dashoffset 0.2s ease;
}
/* 中心播放暂停按钮 */
.circle-center-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 播放图标 */
.icon-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #2d8cf0;
  margin-left: 3px;
}
/* 暂停图标 */
.icon-pause {
  display: flex;
  gap: 3px;
}
.icon-pause span {
  width: 3px;
  height: 9px;
  background: #2d8cf0;
  border-radius: 2px;
}
/*
<div class="audio-progress-circle" id="circle1">
  <svg width="50" height="50" viewBox="0 0 100 100">
    <circle class="circle-bg" cx="50" cy="50" r="25"></circle>
    <circle class="circle-progress" cx="30" cy="30" r="25"></circle>
  </svg>
  <div class="circle-center-btn">
    <div class="icon-play"></div>
  </div>
</div>
*/