当前位置：首页 > JavaScript

js实现spinner

2026-02-01 10:11:26JavaScript

使用CSS和JavaScript实现Spinner

创建一个简单的旋转加载动画（Spinner）可以通过CSS动画结合JavaScript控制显示与隐藏。以下是两种常见实现方式：

纯CSS Spinner

通过CSS关键帧动画实现无需额外JavaScript逻辑：

<div class="spinner"></div>

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s linear infinite;
}

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

动态控制Spinner的JavaScript实现

通过JavaScript动态显示/隐藏Spinner：

<button id="loadButton">加载数据</button>
<div id="spinner" class="spinner" style="display:none;"></div>

document.getElementById('loadButton').addEventListener('click', function() {
  const spinner = document.getElementById('spinner');
  spinner.style.display = 'block';

  // 模拟异步操作
  setTimeout(() => {
    spinner.style.display = 'none';
    alert('加载完成');
  }, 2000);
});

高级Spinner库实现

使用第三方库如Spin.js提供更多定制选项：

<div id="spinner-container"></div>

const opts = {
  lines: 12, // 旋转线条数
  length: 10, // 线条长度
  width: 5, // 线条宽度
  radius: 15, // 内圆半径
  color: '#000', 
  speed: 1, // 旋转速度
  trail: 60, // 拖尾百分比
  shadow: false 
};

const spinner = new Spinner(opts).spin(document.getElementById('spinner-container'));

// 停止Spinner
spinner.stop();

SVG动画Spinner

使用SVG实现更复杂的动画效果：

js实现spinner

<svg class="spinner" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>

.spinner {
  animation: rotate 2s linear infinite;
  width: 50px;
  height: 50px;
}

.spinner circle {
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}