如何从左到右制作圆形进度条动画？( js pure)

从左到右制作圆形进度条动画可以通过以下步骤实现：

1. 创建一个HTML元素，用于显示圆形进度条。可以使用<div>元素，并为其设置一个唯一的ID，例如<div id="progress-bar"></div>。
2. 使用CSS样式来定义进度条的外观。设置进度条的宽度、高度、边框样式、背景颜色等。同时，设置border-radius属性为50%，使其呈现圆形。
3. 在JavaScript中，获取进度条元素的引用。可以使用document.getElementById方法，例如const progressBar = document.getElementById('progress-bar');。
4. 定义一个函数来控制进度条的动画效果。可以命名为animateProgressBar。该函数将接受一个参数，表示进度的百分比。
5. 在animateProgressBar函数中，计算进度条的宽度。根据传入的百分比参数，将其转换为进度条的宽度百分比。例如，如果进度为50%，则宽度为50%。
6. 使用CSS样式将计算得到的进度条宽度应用到进度条元素上。可以使用style.width属性，例如progressBar.style.width = progress + '%';。
7. 使用requestAnimationFrame方法来实现平滑的动画效果。在animateProgressBar函数中，使用递归调用来不断更新进度条的宽度，直到达到目标进度。
8. 在递归调用中，可以使用一个变量来表示当前进度，初始值为0。每次递归调用时，将当前进度增加一个小的增量值，例如0.5。同时，将当前进度作为参数传递给animateProgressBar函数。
9. 在每次递归调用时，检查当前进度是否达到目标进度。如果未达到目标进度，则继续递归调用animateProgressBar函数。否则，动画结束。

下面是一个示例的JavaScript代码：

const progressBar = document.getElementById('progress-bar');

function animateProgressBar(targetProgress) {
  let currentProgress = 0;

  function updateProgress() {
    currentProgress += 0.5;
    progressBar.style.width = currentProgress + '%';

    if (currentProgress < targetProgress) {
      requestAnimationFrame(updateProgress);
    }
  }

  requestAnimationFrame(updateProgress);
}

animateProgressBar(80); // 以80%的进度开始动画

通过调用animateProgressBar函数，并传入目标进度的百分比，即可开始制作从左到右的圆形进度条动画。在上述示例中，进度条将从0%逐渐增加到80%。你可以根据需要调整动画的起始和目标进度。