如何实现带有圆环效果和鼠标提示信息的前端进度条？

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

.progress-container {
  width: 200px; /* 可调整宽度 */
  height: 20px;
  background-color: #f0f0f0;
  position: relative; /* 为绝对定位的圆环提供参考 */
}

.progress-bar {
  height: 100%;
  background-color: #4CAF50; /* 可自定义颜色 */
}

.progress-circle {
  width: 15px; /* 圆环大小 */
  height: 15px;
  background-color: white;
  border: 2px solid #4CAF50;
  border-radius: 50%;
  position: absolute;
  right: 0; /* 圆环位置 */
  top: 2.5px; /* 垂直居中调整 */
}

const progressBar = document.querySelector('.progress-bar');
const progressContainer = document.querySelector('.progress-container');
let progress = 0; // 初始进度

function updateProgress(newProgress) {
  progress = Math.min(100, Math.max(0, newProgress)); // 保证进度在0-100之间
  progressBar.style.width = `${progress}%`;
}

progressContainer.addEventListener('mousemove', (e) => {
  const rect = progressContainer.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const calculatedProgress = (x / rect.width) * 100;
  updateProgress(calculatedProgress); // 实时更新进度

  // 显示提示信息 (可以使用 tooltip 库或自定义提示框)
  const tooltip = document.createElement('div');
  tooltip.classList.add('tooltip');
  tooltip.textContent = `${calculatedProgress.toFixed(0)}%`;
  tooltip.style.left = `${x}px`;
  tooltip.style.top = `${rect.bottom + 5}px`; // 提示框位置
  document.body.appendChild(tooltip);
});


progressContainer.addEventListener('mouseout', () => {
  // 移除提示信息
  const tooltip = document.querySelector('.tooltip');
  if (tooltip) {
    document.body.removeChild(tooltip);
  }
});

// 示例：模拟进度变化
setInterval(() => {
  updateProgress(progress + 5);
}, 1000); // 每秒增加5%进度

.tooltip {
  position: absolute;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0.9;
  pointer-events: none; /* 防止遮挡鼠标事件 */
}