Which is Better Node.js Progress Indicators?
ora vs progress vs cli-progress vs progress-bar-webpack-plugin
1 Year
oraprogresscli-progressprogress-bar-webpack-pluginSimilar Packages:
What's Node.js Progress Indicators?

Progress indicators are essential tools in Node.js applications, especially for command-line interfaces (CLIs) and build processes. They provide visual feedback to users, indicating the status of ongoing operations, which enhances user experience and engagement. These libraries offer various styles and functionalities for displaying progress, making them suitable for different use cases, from simple console logs to complex build processes in Webpack.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
ora27,954,0219,11227.1 kB20a month agoMIT
progress18,325,9412,974-726 years agoMIT
cli-progress3,495,3201,10062.2 kB202 years agoMIT
progress-bar-webpack-plugin98,657431-155 years agoMIT
Feature Comparison: ora vs progress vs cli-progress vs progress-bar-webpack-plugin

Customization

  • ora: ora provides a simple spinner for indicating loading states but has limited customization options compared to cli-progress. It is best for scenarios where a straightforward loading indicator is sufficient.
  • progress: progress offers basic customization options, allowing you to set the total number of steps and the format of the output. However, it lacks the extensive styling capabilities of cli-progress.
  • cli-progress: cli-progress allows extensive customization, including the ability to change the format, colors, and styles of the progress bar. You can easily define how the progress is displayed, making it suitable for various user interfaces.
  • progress-bar-webpack-plugin: progress-bar-webpack-plugin is specifically designed for Webpack, providing a progress bar for build processes. Its customization is limited to Webpack configurations, making it less flexible for general-purpose use.

Use Case

  • ora: ora is best suited for simple loading indicators in CLI applications, such as during data fetching or processing tasks where a spinner suffices to indicate ongoing work.
  • progress: progress is ideal for straightforward applications that require a simple progress bar, such as command-line tools that perform tasks with a known number of steps.
  • cli-progress: cli-progress is versatile and can be used in various Node.js applications, especially where multiple progress indicators are needed, such as file downloads or batch processing tasks.
  • progress-bar-webpack-plugin: progress-bar-webpack-plugin is tailored for Webpack build processes, providing real-time feedback during compilation. It is specifically designed for developers using Webpack and is not suitable for general-purpose use.

Complexity

  • ora: ora is very simple and easy to implement, making it ideal for developers looking for a quick and effective way to indicate loading states without much overhead.
  • progress: progress is relatively simple to use, providing a straightforward API for displaying progress without complex configurations, making it accessible for beginners.
  • cli-progress: cli-progress has a moderate complexity level due to its extensive features and customization options, making it suitable for developers who require detailed progress reporting.
  • progress-bar-webpack-plugin: progress-bar-webpack-plugin is straightforward to set up within a Webpack configuration, but it requires familiarity with Webpack's ecosystem, which may add complexity for new users.

Integration

  • ora: ora is designed for use in Node.js CLI applications and is easy to integrate, providing a quick solution for loading indicators without additional dependencies.
  • progress: progress can be easily integrated into Node.js applications and is suitable for simple command-line tools, making it a good choice for quick implementations.
  • cli-progress: cli-progress can be integrated into any Node.js application and works well with other libraries, making it a flexible choice for developers looking to enhance their CLI tools.
  • progress-bar-webpack-plugin: progress-bar-webpack-plugin is specifically designed for Webpack, so it integrates seamlessly into Webpack projects but is not applicable outside of that context.

Performance

  • ora: ora is lightweight and does not impact performance significantly, making it a good choice for applications where minimal overhead is desired during loading states.
  • progress: progress is efficient for simple tasks, but its performance may vary based on how it is implemented in more complex scenarios.
  • cli-progress: cli-progress is optimized for performance, allowing for smooth updates of multiple progress bars without significant overhead, making it suitable for high-performance applications.
  • progress-bar-webpack-plugin: progress-bar-webpack-plugin is designed to provide real-time feedback during Webpack builds, and its performance is closely tied to the build process, making it efficient for that specific use case.
How to Choose: ora vs progress vs cli-progress vs progress-bar-webpack-plugin
  • cli-progress: Choose cli-progress if you need a highly customizable progress bar that supports multiple bars and detailed formatting options. It is ideal for applications requiring visual feedback for multiple concurrent tasks.
README for ora

ora

Elegant terminal spinner



Install

npm install ora

Check out yocto-spinner for a smaller alternative.

Usage

import ora from 'ora';

const spinner = ora('Loading unicorns').start();

setTimeout(() => {
	spinner.color = 'yellow';
	spinner.text = 'Loading rainbows';
}, 1000);

API

ora(text)

ora(options)

If a string is provided, it is treated as a shortcut for options.text.

options

Type: object

text

Type: string

The text to display next to the spinner.

prefixText

Type: string | () => string

Text or a function that returns text to display before the spinner. No prefix text will be displayed if set to an empty string.

suffixText

Type: string | () => string

Text or a function that returns text to display after the spinner text. No suffix text will be displayed if set to an empty string.

spinner

Type: string | object
Default: 'dots'

The name of one of the provided spinners. See example.js in this repo if you want to test out different spinners. On Windows (except for Windows Terminal), it will always use the line spinner as the Windows command-line doesn't have proper Unicode support.

Or an object like:

{
	frames: ['-', '+', '-'],
	interval: 80 // Optional
}
color

Type: string
Default: 'cyan'
Values: 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'white' | 'gray'

The color of the spinner.

hideCursor

Type: boolean
Default: true

Set to false to stop Ora from hiding the cursor.

indent

Type: number
Default: 0

Indent the spinner with the given number of spaces.

interval

Type: number
Default: Provided by the spinner or 100

Interval between each frame.

Spinners provide their own recommended interval, so you don't really need to specify this.

stream

Type: stream.Writable
Default: process.stderr

Stream to write the output.

You could for example set this to process.stdout instead.

isEnabled

Type: boolean

Force enable/disable the spinner. If not specified, the spinner will be enabled if the stream is being run inside a TTY context (not spawned or piped) and/or not in a CI environment.

Note that {isEnabled: false} doesn't mean it won't output anything. It just means it won't output the spinner, colors, and other ansi escape codes. It will still log text.

isSilent

Type: boolean
Default: false

Disable the spinner and all log text. All output is suppressed and isEnabled will be considered false.

discardStdin

Type: boolean
Default: true

Discard stdin input (except Ctrl+C) while running if it's TTY. This prevents the spinner from twitching on input, outputting broken lines on Enter key presses, and prevents buffering of input while the spinner is running.

This has no effect on Windows as there is no good way to implement discarding stdin properly there.

Instance

.text get/set

Change the text displayed after the spinner.

.prefixText get/set

Change the text before the spinner.

No prefix text will be displayed if set to an empty string.

.suffixText get/set

Change the text after the spinner text.

No suffix text will be displayed if set to an empty string.

.color get/set

Change the spinner color.

.spinner get/set

Change the spinner.

.indent get/set

Change the spinner indent.

.isSpinning get

A boolean indicating whether the instance is currently spinning.

.interval get

The interval between each frame.

The interval is decided by the chosen spinner.

.start(text?)

Start the spinner. Returns the instance. Set the current text if text is provided.

.stop()

Stop and clear the spinner. Returns the instance.

.succeed(text?)

Stop the spinner, change it to a green and persist the current text, or text if provided. Returns the instance. See the GIF below.

.fail(text?)

Stop the spinner, change it to a red and persist the current text, or text if provided. Returns the instance. See the GIF below.

.warn(text?)

Stop the spinner, change it to a yellow and persist the current text, or text if provided. Returns the instance.

.info(text?)

Stop the spinner, change it to a blue and persist the current text, or text if provided. Returns the instance.

.stopAndPersist(options?)

Stop the spinner and change the symbol or text. Returns the instance. See the GIF below.

options

Type: object

symbol

Type: string
Default: ' '

Symbol to replace the spinner with.

text

Type: string
Default: Current 'text'

Text to be persisted after the symbol.

prefixText

Type: string | () => string
Default: Current prefixText

Text or a function that returns text to be persisted before the symbol. No prefix text will be displayed if set to an empty string.

suffixText

Type: string | () => string
Default: Current suffixText

Text or a function that returns text to be persisted after the text after the symbol. No suffix text will be displayed if set to an empty string.

.clear()

Clear the spinner. Returns the instance.

.render()

Manually render a new frame. Returns the instance.

.frame()

Get a new frame.

oraPromise(action, text)

oraPromise(action, options)

Starts a spinner for a promise or promise-returning function. The spinner is stopped with .succeed() if the promise fulfills or with .fail() if it rejects. Returns the promise.

import {oraPromise} from 'ora';

await oraPromise(somePromise);

action

Type: Promise | ((spinner: ora.Ora) => Promise)

options

Type: object

All of the options plus the following:

successText

Type: string | ((result: T) => string) | undefined

The new text of the spinner when the promise is resolved.

Keeps the existing text if undefined.

failText

Type: string | ((error: Error) => string) | undefined

The new text of the spinner when the promise is rejected.

Keeps the existing text if undefined.

spinners

Type: Record<string, Spinner>

All provided spinners.

FAQ

How do I change the color of the text?

Use chalk or yoctocolors:

import ora from 'ora';
import chalk from 'chalk';

const spinner = ora(`Loading ${chalk.red('unicorns')}`).start();

Why does the spinner freeze?

JavaScript is single-threaded, so any synchronous operations will block the spinner's animation. To avoid this, prefer using asynchronous operations.

Related

Ports