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

<div class="progress-bar">
  <div class="progress-point"></div>
  <div class="tooltip" style="display: none;"></div>
</div>

.progress-bar {
  position: relative;
  height: 10px;
  background-color: #f0f0f0; /* 进度条背景色 */
  width: 0%; /* 初始宽度为0% */
  transition: width 0.3s ease; /* 添加过渡效果 */
}

.progress-point {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; /* 圆环大小 */
  height: 10px;
  border-radius: 50%;
  background-color: #4CAF50; /* 圆环颜色 */
}

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 10; /* 保证提示信息显示在进度条上方 */
}

const progressBar = document.querySelector('.progress-bar');
const progressPoint = document.querySelector('.progress-point');
const tooltip = document.querySelector('.tooltip');

progressBar.addEventListener('mousemove', (e) => {
  const rect = progressBar.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const percentage = Math.round((x / rect.width) * 100);
  tooltip.style.left = x + 'px';
  tooltip.textContent = percentage + '%';
  tooltip.style.display = 'block';
});

progressBar.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

// 模拟进度更新 (替换为实际的进度更新逻辑)
let progress = 0;
const updateProgress = () => {
  progress += 5;
  if (progress <= 100) {
    progressBar.style.width = progress + '%';
    setTimeout(updateProgress, 100); // 每100毫秒更新一次进度
  }
};

updateProgress();