在前端开发中，有时我们需要在界面上展示加载中的效果，这时候就可以使用 char-spinner 这个 npm 包。char-spinner 可以让我们非常方便地创建一个多彩的动画加载效果，本篇文章将为大家提供 char-spinner 的使用教程。
安装
如果你的项目使用了 npm ，那么使用 char-spinner 就非常简单了，只需要在终端中运行以下命令：
npm install char-spinner --save
然后在 JS 文件中引用：
import CharSpinner from 'char-spinner';
如果你使用了其他构建工具，如 Webpack 或者 Rollup ，也可以使用相应的方式引入。
使用
CharSpinner 的使用非常简单，只需要创建一个 CharSpinner 实例，调用实例的 show() 方法即可展示加载动画。同时，CharSpinner 还提供了一些配置和方法，下面就让我们看看怎么使用这些功能。
基本用法
const spinner = new CharSpinner(); spinner.show();
这就是展示 CharSpinner 的最基本用法，就这么简单！show() 方法会默认以不停旋转的小圆点的形式展示加载中的效果。
另外，CharSpinner 的 show() 方法还可以接收一个参数，表示展示加载中的文字：
spinner.show('正在加载中');
配置
CharSpinner 有一些配置可供设置，以下是可选配置的默认值：
{ chars: '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏', // 显示的字符，依次代表不同的加载图标 offset: 0, // 初始加载图标的偏移量 interval: 80, // 每一个加载图标的切换时间 }
你可以直接修改以上属性，也可以在创建 CharSpinner 实例时传入相应的配置：
const spinner = new CharSpinner({ chars: '⠟⠯⠷⠻', interval: 100, });
方法
CharSpinner 还提供了一些方法，可以让你更方便地使用它。
show()
展示加载动画。如前所述，show() 方法可以接收一个参数，表示展示加载中的文字。
hide()
隐藏加载动画。
toggle()
切换展示或隐藏状态。
update(text)
更新展示中的文字。
destroy()
销毁 CharSpinner 实例。
示例
下面是一个完整的示例，展示了 char-spinner 的使用方法及效果。你可以将以下代码复制到你的项目中尝试，也可以到 CodePen 查看效果。
-- -------------------- ---- ------- ------ ----------- ---- --------------- ----- ------- - --- ------------- ------ -------- --------- ---- --- ------------- -- - ------------------------- -- ----- ------------- -- - --------------------------------- -- ------ ------------- -- - --------------- -- ------ ------------- -- - ----------------- -- ------ ------------- -- - ------------------ -- -------展开代码
总结
CharSpinner 是一个非常实用的前端加载动画插件，本篇文章介绍了它的安装、使用方法及相关配置和方法。希望这篇文章能够帮助你更好地使用 CharSpinner，并在你的项目中发挥它的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61152
