Skip to main content

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​