Getting Started

import { InteractiveManager, InteractiveStreamHook } from "@visulima/interactive-manager";
import { Spinner } from "@visulima/spinner";

const stdoutHook = new InteractiveStreamHook(process.stdout);
const stderrHook = new InteractiveStreamHook(process.stderr);
const manager = new InteractiveManager(stdoutHook, stderrHook);

const spinner = new Spinner({ name: "dots" }, manager);

spinner.start("Processing...");

await processData();

spinner.succeed("Completed!");

const spinner = new Spinner({ name: "line" }, manager);

spinner.start("Connecting to database...");

try {
    await connectDB();
    spinner.succeed("Connected!");
} catch (error) {
    spinner.failed(`Failed: ${error.message}`);
}

// Declarative style — uses Node.js util.styleText
const spinner = new Spinner(
    {
        name: "breathe",
        style: { bold: true, color: "cyan" },
    },
    manager,
);

// Function style — full control
const spinner = new Spinner(
    {
        name: "breathe",
        style: (text) => `\x1b[1m\x1b[36m${text}\x1b[0m`,
    },
    manager,
);

const spinner = new Spinner(
    {
        name: "dots",
        icons: {
            success: "DONE",
            error: "FAIL",
            warning: "WARN",
            info: "NOTE",
        },
    },
    manager,
);

spinner.start("Loading...");
spinner.succeed(); // Shows "DONE" icon

import { getSpinnerNames } from "@visulima/spinner";

const names = getSpinnerNames();
console.log(names); // ['aesthetic', 'arc', 'arrow', ...]

// Disable spinner output (useful in CI/testing)
const spinner = new Spinner({ name: "dots", verbose: false }, manager);