The Node Forge presents:

Loader Kit

A lightweight, customizable loader library for JavaScript/TypeScript applications. Loader Kit provides beautiful and dynamic loading indicators—including spinners, progress bars, and dot loaders—with smooth CSS animations to enhance user experience during asynchronous operations.

✨ Features

✅ Multiple Loader Types – Choose between spinners, progress bars, or dots.
✅ Minimal API Surface – Just import and go.
✅ Smooth CSS Animations – Built with modern CSS and vanilla JavaScript.
✅ Built-In Helpers – Spinner, ProgressBar, and Dots for dead-simple usage.

📦 Installation

npm install @the-node-forge/loader-kit

or using Yarn:

yarn add @the-node-forge/loader-kit

🛠️ Usage

import { Spinner, ProgressBar, Dots } from '@the-node-forge/loader-kit';

// Show a spinner
Spinner.show();
setTimeout(() => Spinner.hide(), 2000);

// Show a progress bar
ProgressBar.start('#progress-bar');
ProgressBar.set(50);
ProgressBar.complete();

// Show dot loader
Dots.show();
Dots.hide();

🧩 Helpers API

Spinner

Spinner.show(container?: HTMLElement, options?: {
  color?: string;
  size?: number;
  position?: 'inline' | 'centered' | 'overlay';
  style?: Partial<CSSStyleDeclaration>;
})
Spinner.hide()

ProgressBar

ProgressBar.start(container: HTMLElement | string, options?: {
  color?: string;
  size?: number;
  style?: Partial<CSSStyleDeclaration>;
})
ProgressBar.set(percent: number)
ProgressBar.complete()

Dots

Dots.show(container?: HTMLElement, options?: {
  color?: string;
  position?: 'inline' | 'centered' | 'overlay';
  style?: Partial<CSSStyleDeclaration>;
})
Dots.hide()