@the-node-forge/loader-kit

Loader Kit

Live Documentation

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()

💡 Contributing

We welcome contributions! Feel free to open an issue or submit a pull request.

⭐ Support

If you find Loader Kit helpful, give it a ⭐ on GitHub.

🔗 Links

• 📦 NPM Package
• 📖 Live Docs
• 🏠 The-Node-Forge Org