仿抖音小球刷新进度条（两个小球转动），代码很简单

在模仿抖音风格的小球刷新进度条效果时，通常我们会创建一个圆形或椭圆形状的小球动画，随着滚动或数据更新而上下移动，并模拟加载过程中的动态视觉反馈。这个过程可以用CSS3动画配合JavaScript或者HTML5 Canvas实现。 步骤大致如下： 1. **HTML结构**：创建一个包含小球元素（通常是SVG或div）的容器，并设置初始位置。 ```html <div class="refresh-indicator"> <svg> <circle cx="50%" cy="50%" r="20" fill="transparent" stroke="#fff" stroke-width="4" /> </svg> </div> ``` 2. **CSS样式**：定义动画的关键帧，让小球上下移动并改变透明度。 ```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控制**：如果需要，可以添加事件监听器来触发动画开始、暂停或停止。例如，在数据更新时启动或暂停动画。 ```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(); ```