如何在向下滚动的页面上制作圆形进度条动画

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

#progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #00aaff;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

window.onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var windowHeight = document.documentElement.clientHeight || window.innerHeight;
  var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  var progress = (scrollTop / (documentHeight - windowHeight)) * 100;
  document.getElementById("progress-bar").style.backgroundImage = "linear-gradient(90deg, #00aaff " + progress + "%, transparent " + progress + "%)";
};