在前端开发中，我们经常需要使用到进度条或者加载指示器来提升用户体验。而 cli-spinners 就是一个非常好用的 npm 包，它提供了多种漂亮实用的终端加载指示器，可以帮助我们快速实现这样的功能。
安装
你可以通过以下命令安装 cli-spinners：
npm install cli-spinners
使用方法
使用 cli-spinners 的方法非常简单，我们只需要引入该包，然后选择一个合适的加载指示器进行使用即可。
下面是一个最基本的示例，使用默认加载指示器：
-- -------------------- ---- ------- ----- -------- - ------------------------ -- --------- ----- ------- - -------------- -- ------- ----- -------- - -------------- -- - -------------------------------------------------------- ---------- ------------- - -------------- - -- - ---------------------- -- ------------------
上述代码中，我们首先通过 require() 函数引入了 cli-spinners 包，并从中选择了默认的加载指示器 dots。然后，我们启动了一个定时器并不断更新终端输出，以显示加载指示器动画。
除了默认的加载指示器 dots 之外， cli-spinners 还提供了许多其他的可选指示器，比如 line, dots2, pong 等等。你可以通过以下代码查看所有提供的加载指示器：
const spinners = require('cli-spinners');
console.log(Object.keys(spinners));进一步扩展
虽然 cli-spinners 提供了多种实用的加载指示器，但在某些情况下，我们可能需要更加个性化的效果。这时，我们可以针对具体需求进行自定义开发，以实现更加符合业务场景的加载指示器。
下面是一个简单的自定义演示，使用 ASCII 字符拼接成了一个类似飞行的加载指示器：
-- -------------------- ---- ------- ----- ------ - - - --- - ----- -------- --------- - -------- - -------- - ------- -- -- ------- ----- -------- - -------------- -- - -------------------------------------------- ----------------------- -- -----
上述代码中，我们手动定义了一个数组 frames，其中包含了每一帧加载指示器的 ASCII 字符画。然后，我们启动了一个定时器，通过不断更新终端输出来显示加载指示器动画。
总结
在本文中，我们介绍了 npm 包 cli-spinners 的使用方法，并给出了多个示例代码，希望能够对大家在前端开发过程中实现加载指示器功能有所帮助。同时，我们也提到了如何针对业务需求进行自定义开发，以实现更加符合要求的加载指示器效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48838