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

npm install ngx-loading-page

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

🚀 Usage

1. Import the Module

import { NgxLoadingPageModule } from 'ngx-loading-page';

@NgModule({
  imports: [NgxLoadingPageModule]
})
export class AppModule {}

2. Use the Component in Your Template

<ngx-loading-page
  [loaderType]="'spinner'"
  [text]="'Loading...'"
  [textColor]="'#ffffff'"
  [backgroundColor]="'#000000'"
  [loaderColor]="'#00ffcc'"
  [width]="'300px'"
  [height]="'200px'"
></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:

git clone https://github.com/dilipkumarsahoo/ngx-loading-page.git
cd ngx-loading-page
npm install
npm 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.