在前端开发中，我们经常需要使用 Loading 动画来提升用户体验。使用 npm 包 neat-spinner 可以快速构建出简洁美观的 Loading 动画，本文将介绍 neat-spinner 的使用教程。
1. 安装
在使用 neat-spinner 之前，需要通过 npm 安装，使用以下命令进行安装
--- ------- ------------ ------
2. 引入
安装完成之后，在需要使用 neat-spinner 的文件中引入，可以使用 es module 或者 CommonJS 规范进行引入：
-- -- ------ ---- ------ ----------- ---- -------------- -- -------- ---- ----- ----------- - -----------------------
3. 使用
neat-spinner 的使用非常简单，只需要实例化 NeatSpinner，并调用 start() 方法即可。
----- ------- - --- ------------- ---------------
start() 方法会返回一个 Promise，当调用 stop() 方法时，Promise 才会 resolve。
---------------------- -- - -------------------- ------------ --
此外，还可以通过实例化时传入参数控制 neat-spinner 的样式，如速度、颜色、字符等，具体参数如下：
speed：Number 类型，字符间隔时间，默认值为 100。color：String 类型，字符颜色，默认值为 'cyan'。char：String 类型，Loading 结构，默认为 'dots'。
----- ------- - --- ------------- ------ ---- ------ ------ ----- ----- --
示例代码
------ ----------- ---- --------------
----- ------- - --- -------------
------ -----
--
---------------
------------- -- -
---------------------- -- -
-------------------- ------------
--
-- -----总结
neat-spinner 是一个简单易用的 npm 包，可以快速构建出简洁美观的 Loading 动画，提升用户体验。使用时只需要实例化 NeatSpinner，调用 start() 方法即可，非常方便。在实例化时，还可以通过传入参数控制 neat-spinner 的样式。希望本篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/87966