Throbber是一个动画元素,表明计算机正在工作. 众所周知的名称,如那个时钟玻璃
或死亡的旋转轮子
,这个指标被用来传达给用户,他们需要等待一会儿,而计算机完成了它正在做的事情。
不要与进度栏混淆,打击器更像是一个图标,并且在命令行上可以像闪烁的指针一样简单,一系列圆形,或者像由-
,\
、``和/
字符表示的旋转线一样复杂。
在网站上,你可以使用动画 GIF,或者更先进的,用CSS构建一个动画,命令行实现更为复杂,因为它涉及在屏幕的同一部分重复写。
如果你只是在上面提到的动画中的每个字符console.log()
,你会得到这样的东西:
1- Loading...
2\ Loading...
3| Loading...
4/ Loading...
5- Loading...
6\ Loading...
在你和我之间,我甚至不知道如何用Node.js在终端屏幕的同一区域中写作和重写,幸运的是,臭名昭着的全职开源(Sindre Sorhus)(https://github.com/sindresorhus)已经为我们整理和包装了东西!
开始的
该包是 ora
,自称优雅的终端旋转器. 要开始使用 ora
,只需将其添加到您的包:
1# via npm
2$ npm install ora
3
4# via yarn
5$ yarn add ora
随着软件包的安装,你需要从你的脚本中`要求():
1const ora = require('ora');
基本使用
一旦包含在你的脚本中,你可以开始和停止打击器,没有任何问题:
1const ora = require('ora');
2
3const throbber = ora('Rounding up all the alligators').start();
4
5// Simulating some asynchronous work for 10 seconds...
6setTimeout(() => {
7 throbber.stop();
8}, 1000 * 10);
默认情况下,‘ora’显示了一个微妙的旋转器,由点组成,类似于行进蚂蚁指示器(图像应用程序中的选择周围有点线):
1⠏ Rounding up all the alligators
當「setTimeout()」的使用負載啟動時,打擊器會停止並從屏幕上刪除。
<$>[注] ** 注意:** 取而代之的是停机时间,你可以开启一个AJAX呼叫或执行一些需要一段时间的其他工作,当事情完成时停止ora
对象。
持续产量
如果你喜欢,你也可以将你的加载文本保留在屏幕上,并用另一个字符代替你的打击符,你甚至可以更改加载文本说完成
或类似的东西:
1const ora = require('ora');
2
3const throbber = ora('Rounding up all the alligators').start();
4
5// Simulating some asynchronous work for 10 seconds...
6setTimeout(() => {
7 throbber.stopAndPersist({
8 symbol: '🐊',
9 text: 'All done rounding up the alligators!',
10 });
11}, 1000 * 10);
现在,而不是突然离开屏幕的刺客和文本,你留下了友好的信息和更友好的情绪!
常规破坏者
ora
的默认 throbber 输出对于out of the box
选项来说相当不错,但如果你想要更多,那么 ora
确实会作为一个依赖的项目提供 ‘cli-spinners’。
这个附加项目,由同一作者,有近70(在这个写作时)不同的旋转
动画,涵盖几乎每个用例你可以想到。
想到没有被覆盖的东西?
如果是这样,你可以轻松地将自己的动画定义为一些JSON,其中有间隔(框架之间的时间)和你想要循环的框架的数组。
例如,如果你想拥有自己的爬行动物主题,你可以写点类似的:
1const ora = require('ora');
2
3const throbber = ora({
4 text: 'Rounding up all the reptiles',
5 spinner: {
6 frames: ['🐊', '🐢', '🦎', '🐍'],
7 interval: 300, // Optional
8 },
9}).start();
10
11// Simulating some asynchronous work for 10 seconds...
12setTimeout(() => {
13 throbber.stop();
14}, 1000 * 10);
现在你只受你的想象力限制。