js实现spinner

使用纯CSS实现Spinner

通过CSS的@keyframes和animation属性可以轻松创建一个旋转的spinner效果。以下是一个简单的实现示例：

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

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>

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

使用SVG实现Spinner

SVG提供了更精细的控制，适合需要复杂动画的场景：

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

<style>
  .spinner {
    animation: rotate 2s linear infinite;
    width: 40px;
    height: 40px;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
</style>

使用JavaScript控制Spinner

如果需要动态控制spinner的显示/隐藏，可以结合JavaScript：

function showSpinner() {
  document.getElementById('spinner').style.display = 'block';
}

function hideSpinner() {
  document.getElementById('spinner').style.display = 'none';
}

使用第三方库

对于更复杂的需求，可以考虑使用第三方库如Spin.js：

var opts = {
  lines: 12, // 线条数量
  length: 7, // 每条线长度
  width: 5, // 线宽
  radius: 10, // 内圆半径
  color: '#000', // 颜色
  speed: 1, // 旋转速度
  trail: 60, // 拖尾百分比
  shadow: false // 是否显示阴影
};

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

响应式Spinner实现

确保spinner在不同设备上都能正常显示：

.spinner {
  width: 5vw;
  height: 5vw;
  min-width: 40px;
  min-height: 40px;
  /* 其余样式保持不变 */
}

可访问性考虑

为spinner添加ARIA属性，提升无障碍体验：

<div class="spinner" role="status" aria-label="Loading..."></div>