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

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

or using Yarn:

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

---

🛠️ Usage

1import { Spinner, ProgressBar, Dots } from '@the-node-forge/loader-kit';
2
3// Show a spinner
4Spinner.show();
5setTimeout(() => Spinner.hide(), 2000);
6
7// Show a progress bar
8ProgressBar.start('#progress-bar');
9ProgressBar.set(50);
10ProgressBar.complete();
11
12// Show dot loader
13Dots.show();
14Dots.hide();

---

🧩 Helpers API

Spinner

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

ProgressBar

1ProgressBar.start(container: HTMLElement | string, options?: {
2  color?: string;
3  size?: number;
4  style?: Partial<CSSStyleDeclaration>;
5})
6ProgressBar.set(percent: number)
7ProgressBar.complete()

Dots

1Dots.show(container?: HTMLElement, options?: {
2  color?: string;
3  position?: 'inline' | 'centered' | 'overlay';
4  style?: Partial<CSSStyleDeclaration>;
5})
6Dots.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