ngx-loading-page

A modern and customizable loading page component for Angular applications. Supports multiple loader styles, dynamic themes, background customization, and a responsive Bootstrap-based card UI.

---

✨ Features

• 🔄 Multiple loader types (spinner, dots, bars, etc.)
• 🎨 Customizable loader color, background color, and text color
• 🧩 Easy integration with Angular apps
• 📦 Lightweight and optimized
• 💅 Responsive card-based design using Bootstrap

---

📦 Installation

1npm install ngx-loading-page

Make sure @angular/core, @angular/common, and bootstrap are installed in your project.

---

🚀 Usage

1. Import the Module

1import { NgxLoadingPageModule } from 'ngx-loading-page';
2
3@NgModule({
4  imports: [NgxLoadingPageModule]
5})
6export class AppModule {}

---

2. Use the Component in Your Template

1<ngx-loading-page
2  [loaderType]="'spinner'"
3  [text]="'Loading...'"
4  [textColor]="'#ffffff'"
5  [backgroundColor]="'#000000'"
6  [loaderColor]="'#00ffcc'"
7  [width]="'300px'"
8  [height]="'200px'"
9></ngx-loading-page>

---

⚙️ Inputs

Input	Type	Description
loaderType	string	Type of loader: 'spinner', 'dots', etc.
text	string	Optional loading text
textColor	string	Color of the text
loaderColor	string	Color of the loader animation
backgroundColor	string	Background color of the loader container
width	string	Width of the loader card (e.g., '300px')
height	string	Height of the loader card (e.g., '200px')

---

🧪 Demo

Check out the Live Demo on StackBlitz
Or clone the example repo to try it out locally.

---

🛠 Development

To build and test locally:

1git clone https://github.com/dilipkumarsahoo/ngx-loading-page.git
2cd ngx-loading-page
3npm install
4npm run build

---

📄 License

MIT © Dilip Sahoo

---

🙌 Contributions

Contributions, issues, and feature requests are welcome!
Feel free to check issues page or open a pull request.