多个圆形进度条在向下滚动时变为活动状态

，可以通过CSS动画和JavaScript来实现。

首先，我们可以使用CSS来创建圆形进度条。可以使用border-radius属性将一个div元素变为圆形，并使用border属性设置边框样式。然后，使用transform属性将其旋转90度，使其变为垂直方向。最后，使用animation属性和@keyframes规则创建一个动画，使进度条在垂直方向上移动。

以下是一个示例的CSS代码：

.progress-bar {
  width: 20px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ccc;
  transform: rotate(90deg);
  animation: progress 2s infinite;
}

@keyframes progress {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: 100px;
  }
}

接下来，我们可以使用JavaScript来控制多个圆形进度条的状态。可以通过获取所有进度条元素的列表，并为每个元素添加一个活动状态的类。然后，使用setInterval函数来定时更改活动状态的类，使进度条在滚动时变为活动状态。

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

var progressBars = document.querySelectorAll('.progress-bar');

setInterval(function() {
  progressBars.forEach(function(progressBar) {
    progressBar.classList.toggle('active');
  });
}, 1000);

最后，我们可以将上述CSS和JavaScript代码应用到HTML页面中，以创建多个圆形进度条并使其在向下滚动时变为活动状态。

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS代码 */
  </style>
</head>
<body>
  <div class="progress-bar"></div>
  <div class="progress-bar"></div>
  <div class="progress-bar"></div>

  <script>
    // JavaScript代码
  </script>
</body>
</html>

这样，当页面加载时，多个圆形进度条将开始滚动，并在滚动时变为活动状态。

对于腾讯云相关产品，可以使用腾讯云的云服务器（CVM）来进行服务器运维，使用云数据库（CDB）来进行数据库存储，使用云函数（SCF）来进行后端开发，使用云存储（COS）来进行多媒体处理和存储等。具体产品介绍和链接地址可以参考腾讯云官方网站。