spin.js 技术文档

1. 安装指南

使用 npm 安装

要安装 spin.js，请在终端中运行以下命令：

npm install spin.js

手动下载

你也可以手动下载 spin.js 和 spin.css 文件，并将它们保存到你的项目目录中。

2. 项目的使用说明

CSS 引入

在你的 HTML 文件中引入 spin.css 文件：

<link rel="stylesheet" href="node_modules/spin.js/spin.css">

TypeScript 或 JavaScript 使用

在你的 TypeScript 或 JavaScript 文件中引入 Spinner 模块，并创建一个 Spinner 实例：

import {Spinner} from 'spin.js';

var target = document.getElementById('foo');
new Spinner({color:'#fff', lines: 12}).spin(target);

交互式演示

要查看所有支持的选项和交互式演示，请访问项目的 主页。

3. 项目 API 使用文档

Spinner 类

Spinner 类是 spin.js 的核心类，用于创建和管理加载动画。

构造函数

new Spinner(options)

• options：一个对象，包含 Spinner 的配置选项。

方法

• spin(target)：在指定的目标元素中启动加载动画。
  • target：目标元素，Spinner 将作为其第一个子元素插入。
• stop()：停止并移除加载动画。

配置选项

• color：Spinner 的颜色，默认为 #000。
• lines：Spinner 的线条数，默认为 12。
• length：每条线的长度，默认为 7。
• width：每条线的宽度，默认为 5。
• radius：Spinner 的半径，默认为 10。
• scale：Spinner 的缩放比例，默认为 1。
• corners：线条的圆角，默认为 1（0 为直角，1 为圆角）。
• speed：Spinner 的旋转速度，默认为 1。
• rotate：Spinner 的旋转角度，默认为 0。
• animation：Spinner 的动画类型，默认为 spinner-line-fade-default。

4. 项目安装方式

npm 安装

推荐使用 npm 进行安装：

npm install spin.js

手动下载

你也可以手动下载 spin.js 和 spin.css 文件，并将它们保存到你的项目目录中。

直接加载 ES6 模块

在现代浏览器中，你可以直接通过 script 标签加载 ES6 模块：

<script type="module" src="node_modules/spin.js/spin.js"></script>

UMD 版本

如果你无法使用 ECMAScript 模块或模块打包工具，可以下载 spin.umd.js 文件，并按如下方式使用：

var spinner = new Spin.Spinner(opts).spin(target);

注意：UMD 版本仅作为临时解决方案，长期建议迁移到标准的 ECMAScript 模块。

通过以上步骤，你可以轻松地在项目中使用 spin.js，并根据需要进行配置和调整。