ng-shimmer-loader

🚀 ng-shimmer-loader

A lightweight Angular library to display a shimmer loading effect in your components.
Easily create elegant shimmer placeholders while your content loads.

📦 Installation

You can install the package using npm:

npm install ng-shimmer-loader

Or using yarn:

yarn add ng-shimmer-loader

🛠️ Usage

Import in Your Angular Module

If your project uses NgModules, import ShimmerLoaderModule:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { ShimmerLoaderModule } from "ng-shimmer-loader";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ShimmerLoaderModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

For Standalone Components, directly import ShimmerLoaderComponent:

import { Component } from "@angular/core";
import { ShimmerLoaderComponent } from "ng-shimmer-loader";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [ShimmerLoaderComponent],
  template: ` <ng-shimmer-loader width="100px" height="20px"></ng-shimmer-loader> `,
})
export class AppComponent {}

🎨 Customization

You can customize the shimmer loader using the following inputs:

Input Property	Type	Default Value	Description
width	string	"100%"	Sets the width of the shimmer loader
height	string	"20px"	Sets the height of the shimmer loader
borderRadius	string	"4px"	Rounds the corners of the loader
animationDuration	string	"1.5s"	Controls shimmer animation speed
className	string	""	Custom class for additional styling

Example Usage with Custom Styles

<ng-shimmer-loader width="200px" height="50px" borderRadius="8px" animationDuration="2s" className="custom-shimmer"> </ng-shimmer-loader>

Custom Styles (CSS)

You can apply your own styles using the className input:

.custom-shimmer {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
}

🏗️ Development & Contribution

1. Clone the Repository

git clone https://github.com/your-github/ng-shimmer-loader.git
cd ng-shimmer-loader

2. Install Dependencies

npm install

3. Build the Library

ng build shimmer-loader

4. Test Locally Before Publishing

To test the package in another Angular project:

cd dist/shimmer-loader
npm link

In your test project:

npm link shimmer-loader

5. Unlink After Testing

npm unlink shimmer-loader
npm install

📢 Contributing

We welcome contributions!

• Fork the repo
• Create a new branch (feature/new-feature)
• Submit a Pull Request 🚀

For major changes, open an issue first to discuss what you'd like to change.

📜 License

This project is licensed under the MIT License.
Feel free to use and modify as needed.

✨ Support & Feedback

• ⭐ Star the repository if you found it useful!
• 🐞 Report issues here
• 💬 Questions? Open a discussion

🎉 Happy Coding! 🚀