命令行加载特效 【cli-spinner.js】 实用教程

命令行加载特效 【cli-spinner.js】 实用教程

cli-spinner 官网​​​cli-spinner 的演示项目

新建文件夹 cli-spinnerDemo在 cli-spinnerDemo文件夹中打开命令行，执行

npm init -y

会自动生成 package.json

安装 cli-spinner

cnpm i cli-spinner

无 cnpm 的朋友先执行 ​​npm i cnpm​​

在package.json中添加项目启动脚本

"start": "node index.js",

在 cli-spinnerDemo文件夹中新建文件 index.js 内容为

let Spinner = require("cli-spinner").Spinner;let spinner = new Spinner("processing.. %s");spinner.setSpinnerString("|/-\\");spinner.start();

启动项目

npm run start

效果如下

导入 cli-spinner

let Spinner = require("cli-spinner").Spinner;

使用 cli-spinner

自定义加载提示文字

let spinner = new Spinner("加载中.. %s");

配置加载特效

spinner.setSpinnerString("|/-\\");

加载特效通过循环遍历字符串 ​​|/-\\​​ 实现，可以自定义为其他字符串。

启动加载

spinner.start();

停止加载

spinner.stop(true);

有参数 true 时，停止加载后，会清除加载提示文字，若无参数，则会保留加载提示文字

封装延时函数

为了看清加载特效，通常会延时1s左右再关闭加载特效，可使用以下函数实现

function sleep(timeout = 1000) { return new Promise((resolve) => setTimeout(resolve, timeout));}

使用方式如下：

let Spinner = require("cli-spinner").Spinner;let spinner = new Spinner("加载中.. %s");spinner.setSpinnerString("|/-\\");(async function () { // 开启加载特效 spinner.start(); // 延时2s await sleep(2000); // 关闭加载特效; spinner.stop(true);})();function sleep(timeout = 1000) { return new Promise((resolve) => setTimeout(resolve, timeout));}

完整演示范例

let Spinner = require("cli-spinner").Spinner;let spinner = new Spinner("加载中.. %s");spinner.setSpinnerString("|/-\\");// 开启加载特效spinner.start();// 1s后关闭加载特效setTimeout(() => { spinner.stop(true);}, 1000);

更多功能

可参考官网，或留言我来添加哈！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。