arrows_4

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, arrows_4 } from 'cli-loaders'; // You can import the arrows_4 object

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

import { initCliLoader } from 'cli-loaders';

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

initCliLoader(myAwesomeLoader); // custom loader object

import { initCliLoader } from 'cli-loaders';

const intervalId = initCliLoader('arrows_4');

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

function start_loader() {
    local keyframes=("⇐" "⇑" "⇒" "⇓") # Keyframes for the loader
    local speed=100 # 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 { arrows_4 } from "cli-loaders";

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

export default Page;