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

cli-spinner 官网
https://www.npmjs.com/package/cli-spinner

创建 cli-spinner 的演示项目

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

npm init -y

会自动生成 package.json

3. 安装 cli-spinner

cnpm i cli-spinner

无 cnpm 的朋友先执行 npm i cnpm

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

    "start": "node index.js",

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

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

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

6. 启动项目

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);

更多功能

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