npm 包 neat-spinner 使用教程

在前端开发中，我们经常需要使用 Loading 动画来提升用户体验。使用 npm 包 neat-spinner 可以快速构建出简洁美观的 Loading 动画，本文将介绍 neat-spinner 的使用教程。

1. 安装

在使用 neat-spinner 之前，需要通过 npm 安装，使用以下命令进行安装

npm install neat-spinner --save

2. 引入

安装完成之后，在需要使用 neat-spinner 的文件中引入，可以使用 es module 或者 CommonJS 规范进行引入：

// es module 引入方式
import NeatSpinner from 'neat-spinner'
// CommonJS 引入方式
const NeatSpinner = require('neat-spinner')

3. 使用

neat-spinner 的使用非常简单，只需要实例化 NeatSpinner，并调用 start() 方法即可。

const spinner = new NeatSpinner()
spinner.start()

start() 方法会返回一个 Promise，当调用 stop() 方法时，Promise 才会 resolve。

spinner.stop().then(() => {
  console.log('Loading completed!')
})

此外，还可以通过实例化时传入参数控制 neat-spinner 的样式，如速度、颜色、字符等，具体参数如下：

• speed：Number 类型，字符间隔时间，默认值为 100。
• color：String 类型，字符颜色，默认值为 'cyan'。
• char：String 类型，Loading 结构，默认为 'dots'。

const spinner = new NeatSpinner({
  speed: 200,
  color: 'red',
  char: 'bar'
})

示例代码

-- -------------------- ---- -------
------ ----------- ---- --------------

----- ------- - --- -------------
  ------ -----
--

---------------

------------- -- -
  ---------------------- -- -
    -------------------- ------------
  --
-- -----

总结

neat-spinner 是一个简单易用的 npm 包，可以快速构建出简洁美观的 Loading 动画，提升用户体验。使用时只需要实例化 NeatSpinner，调用 start() 方法即可，非常方便。在实例化时，还可以通过传入参数控制 neat-spinner 的样式。希望本篇文章能对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/87966