numbers_2

npm install cli-loaders
# or
yarn add cli-loaders
# or
pnpm install cli-loaders
# or
bun add cli-loaders

import { initCliLoader } from 'cli-loaders'; // for initializing

import { initCliLoader, numbers_2 } from 'cli-loaders'; // You can import the numbers_2 object

initCliLoader('numbers_2'); // by name
initCliLoader(numbers_2); // by object

import { initCliLoader } from 'cli-loaders';

initCliLoader('numbers_2', 150); // custom speed
initCliLoader('numbers_2', 150, ["..", "."]); // custom speed and keyframes
// or
const myAwesomeLoader = {
    speed: 150,
    keyframes: ["..", "."]
};

initCliLoader(myAwesomeLoader); // custom loader object

import { initCliLoader } from 'cli-loaders';

const intervalId = initCliLoader('numbers_2');

// Stop the loader after some time
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

function start_loader() {
    local keyframes=("000" "001" "002" "003" "004" "005" "006" "007" "008" "009" "010" "011" "012" "013" "014" "015" "016" "017" "018" "019" "020" "021" "022" "023" "024" "025" "026" "027" "028" "029" "030" "031" "032" "033" "034" "035" "036" "037" "038" "039" "040" "041" "042" "043" "044" "045" "046" "047" "048" "049" "050" "051" "052" "053" "054" "055" "056" "057" "058" "059" "060" "061" "062" "063" "064" "065" "066" "067" "068" "069" "070" "071" "072" "073" "074" "075" "076" "077" "078" "079" "080" "081" "082" "083" "084" "085" "086" "087" "088" "089" "090" "091" "092" "093" "094" "095" "096" "097" "098" "099" "100") # Keyframes for the loader
    local speed=50 # Speed at which the keyframes change
    local pname=$1 # PID of the process to wait for

    while kill -0 "$pname" 2>/dev/null; do
        for frame in "${keyframes[@]}"; do
            printf "\r%s %s" "$frame"
            sleep $speed
        done
    done

    # Clear the loader after the process completes
    printf "\r%s\n" "Done!"
}

function custom_loader() {
    # Example of using the loader with a background task
    (sleep 5) &  # Simulate a long-running task in the background
    start_loader $! # Call the loader with the PID of the background process
}

"use client";

import React, { useEffect, useState } from 'react';

type LoaderProps = {
    speed: number;
    keyframes: string[];
    className?: string;
};

export const Loader: React.FC<LoaderProps> = ({ speed, keyframes, className }) => {
    const [currentFrame, setCurrentFrame] = useState(keyframes[0]);

    useEffect(() => {
        let index = 0;
        const interval = setInterval(() => {
            setCurrentFrame(keyframes[index]);
            index = (index + 1) % keyframes.length;
        }, speed);

        return () => clearInterval(interval);
    }, [keyframes, speed]);

    return (
        <div className={className}>{currentFrame}</div>
    );
};

// page.tsx
import { Loader } from "@/components/Loader";
import { numbers_2 } from "cli-loaders";

const Page = () => (
    <Loader
        speed={numbers_2.speed}
        keyframes={numbers_2.keyframes}
        className="relative text-4xl font-mono flex flex-col justify-center items-center overflow-hidden"
    />
);

export default Page;