仿抖音小球刷新进度条

在模仿抖音风格的小球刷新进度条效果时，通常我们会创建一个圆形或椭圆形状的小球动画，随着滚动或数据更新而上下移动，并模拟加载过程中的动态视觉反馈。这个过程可以用CSS3动画配合JavaScript或者HTML5 Canvas实现。

步骤大致如下：

1. **HTML结构**：创建一个包含小球元素（通常是SVG或div）的容器，并设置初始位置。

<div class="refresh-indicator">
  <svg>
    <circle cx="50%" cy="50%" r="20" fill="transparent" stroke="#fff" stroke-width="4" />
  </svg>
</div>

2. **CSS样式**：定义动画的关键帧，让小球上下移动并改变透明度。

.refresh-indicator {
  position: relative;
  overflow: hidden;
}

.refresh-indicator circle {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); opacity: 0.6; }
  100% { transform: translateY(0); }
}

3. **JavaScript控制**：如果需要，可以添加事件监听器来触发动画开始、暂停或停止。例如，在数据更新时启动或暂停动画。

const indicator = document.querySelector('.refresh-indicator');
let isRefreshing = false;

// 模拟数据更新
function updateData() {
  if (isRefreshing) return;
  isRefreshing = true;
  indicator.classList.add('animating'); // 添加动画类名
  setTimeout(() => {
    isRefreshing = false;
    indicator.classList.remove('animating'); // 动画结束后移除动画类名
  }, 2000);
}

// 触发更新
updateData();