Loading animation for node console

loader.js

// Adapted from https://stackoverflow.com/questions/34848505/how-to-make-a-loading-animation-in-console-application-written-in-javascript-or

/**
 * Create and display a loader in the console.
 *
 * @param {string} [text=""] Text to display after loader
 * @param {array.<string>} [chars=["⠙", "⠘", "⠰", "⠴", "⠤", "⠦", "⠆", "⠃", "⠋", "⠉"]]
 * Array of characters representing loader steps
 * @param {number} [delay=100] Delay in ms between loader steps
 * @example
 * let loader = loadingAnimation("Loading…");
 *
 * // Stop loader after 1 second
 * setTimeout(() => clearInterval(loader), 1000);
 * @returns {number} An interval that can be cleared to stop the animation
 */
function loadingAnimation(
    text = "",
    chars = ["⠙", "⠘", "⠰", "⠴", "⠤", "⠦", "⠆", "⠃", "⠋", "⠉"],
    delay = 100
) {
    let x = 0;

    return setInterval(function() {
        process.stdout.write("\r" + chars[x++] + " " + text);
        x = x % chars.length;
    }, delay);
}

Any example for modifying the text while animating?
e.g. progress bar in percentage?

let loader = loadingAnimation("Loading (10%)…");

... // now what?

Any example for modifying the text while animating? e.g. progress bar in percentage?

let loader = loadingAnimation("Loading (10%)…");

... // now what?

Edit the Function

The loadingAnimation function creates a loader animation in the console.

function loadingAnimation(
    getText,
    chars = ["⠙", "⠘", "⠰", "⠴", "⠤", "⠦", "⠆", "⠃", "⠋", "⠉"],
    delay = 100
) {
    let x = 0;

    return setInterval(function() {
        process.stdout.write("\r" + chars[x++] + " " + getText());
        x = x % chars.length;
    }, delay);
}

Usage

The following example demonstrates how to use the loadingAnimation function to display a progress percentage that updates over time.

// Example usage
let progress = 0;
let loader = loadingAnimation(() => `Loading (${progress}%)…`);

// Simulate progress update
let progressInterval = setInterval(() => {
    progress += 10;
    if (progress > 100) {
        clearInterval(progressInterval);
        clearInterval(loader);
        console.log("\nLoading complete!");
    }
}, 500);

Thanks!

Thanks!

🙏