🚀 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:

1npm install ng-shimmer-loader

Or using yarn:

1yarn add ng-shimmer-loader

---

🛠️ Usage

Import in Your Angular Module

If your project uses NgModules, import ShimmerLoaderModule:

1import { NgModule } from "@angular/core";
2import { BrowserModule } from "@angular/platform-browser";
3import { AppComponent } from "./app.component";
4import { ShimmerLoaderModule } from "ng-shimmer-loader";
5
6@NgModule({
7  declarations: [AppComponent],
8  imports: [BrowserModule, ShimmerLoaderModule],
9  bootstrap: [AppComponent],
10})
11export class AppModule {}

For Standalone Components, directly import ShimmerLoaderComponent:

1import { Component } from "@angular/core";
2import { ShimmerLoaderComponent } from "ng-shimmer-loader";
3
4@Component({
5  selector: "app-root",
6  standalone: true,
7  imports: [ShimmerLoaderComponent],
8  template: ` <ng-shimmer-loader width="100px" height="20px"></ng-shimmer-loader> `,
9})
10export 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

1<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:

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

---

🏗️ Development & Contribution

1. Clone the Repository

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

2. Install Dependencies

1npm install

3. Build the Library

1ng build shimmer-loader

4. Test Locally Before Publishing

To test the package in another Angular project:

1cd dist/shimmer-loader
2npm link

In your test project:

1npm link shimmer-loader

5. Unlink After Testing

1npm unlink shimmer-loader
2npm 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! 🚀