Spin.js 使用教程

2026-01-17 08:48:34作者：余洋婵Anita

项目介绍

Spin.js 是一个用于创建动态加载指示器的 JavaScript 库。它不依赖于任何图片或外部 CSS 样式，完全使用 CSS 关键帧动画来实现，因此具有高度可配置性和分辨率无关性。Spin.js 兼容所有主流浏览器，并且提供了 TypeScript 定义，适用于现代前端开发。

项目快速启动

要快速启动 Spin.js，首先需要通过 npm 安装：

npm install spin.js

然后在你的项目中引入 Spin.js：

import { Spinner } from 'spin.js';

// 配置选项
const opts = {
  lines: 13, // 花瓣数目
  length: 20, // 花瓣长度
  width: 10, // 花瓣宽度
  radius: 30, // 花瓣距中心半径
  color: '#000', // 花瓣颜色
  speed: 1, // 花瓣旋转速度
  trail: 60, // 花瓣旋转时的拖影(百分比)
  shadow: false // 花瓣是否显示阴影
};

// 创建 Spinner 实例
const spinner = new Spinner(opts);

// 显示 Spinner
const target = document.getElementById('spinner-target');
spinner.spin(target);

// 隐藏 Spinner
spinner.stop();

在 HTML 中添加一个目标元素：

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

应用案例和最佳实践

Spin.js 常用于 Ajax 请求的加载指示器。以下是一个完整的示例，展示了如何在 Ajax 请求中使用 Spin.js：

<!DOCTYPE html>
<html>
<head>
  <title>Ajax Loading Demo</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="path/to/spin.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#btnRequest').bind('click', function() {
        ajaxRequestData();
      });
    });

    function ajaxRequestData() {
      $.ajax({
        type: "POST",
        timeout: 10000,
        dataType: "text",
        url: "Index.ashx",
        beforeSend: function() {
          // 显示 Spinner
          $('#firstDiv').text('');
          var target = $('#firstDiv').get(0);
          var spinner = new Spinner(opts).spin(target);
        },
        success: function(msg) {
          $('#firstDiv').text(msg);
          // 隐藏 Spinner
          spinner.stop();
        },
        error: function(e, jqxhr, settings, exception) {
          $('#firstDiv').text('请求发生错误');
          // 隐藏 Spinner
          spinner.stop();
        }
      });
    }
  </script>
</head>
<body>
  <div id="firstDiv"></div>
  <div id="secondDiv">
    <input id="btnRequest" type="button" value="请求数据" class="btnStyle" />
  </div>
</body>
</html>

典型生态项目

Spin.js 可以与其他前端框架和库结合使用，例如 React、Vue 和 Angular。以下是一个在 React 中使用 Spin.js 的示例：

import React, { useEffect, useRef } from 'react';
import { Spinner } from 'spin.js';

const LoadingSpinner = () => {
  const target = useRef(null);

  useEffect(() => {
    const spinner = new Spinner(opts).spin(target.current);
    return () => spinner.stop();
  }, []);

  return <div ref={target}></div>;
};

export default LoadingSpinner;