📦 Image Reveal Spinner

A lightweight Angular-based image reveal spinner that works as a Web Component and supports Angular.

✨ Features

• Smooth image reveal animation
• Configurable progress animation
• Lightweight and optimized
• Works with Angular Standalone Components

📥 Installation

npm install @nawazaideveloperr/image-reveal-spinner

🚀 Usage

Angular 16+ (Standalone Component)

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppImageReveal } from '@nawazaideveloperr/image-reveal-spinner';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, AppImageReveal],
  templateUrl: './home.component.html'
})
export class HomeComponent {}

Template Usage

<app-image-reveal
  [imageUrl]="'https://picsum.photos/800/400'"
  [fillColor]="'#898989'"
  [startValue]="0"
  [endValue]="100"
  [duration]="3000"
  [showProgress]="true"
  [progressSize]="'13px'"
  [progressColor]="'#ffffff'">
</app-image-reveal>

🚀 Best Practice (Staggered Animation in Angular)

To create a better visual experience, you can assign random durations to each image.
This prevents all images from revealing at the same time and creates a natural staggered effect.

Component Logic

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

  imageArry = [
    { imageUrl: 'https://picsum.photos/400/200?1', duration: 0 },
    { imageUrl: 'https://picsum.photos/400/200?2', duration: 0 },
    { imageUrl: 'https://picsum.photos/400/200?3', duration: 0 },
  ];

  ngOnInit(): void {
    for (let i in this.imageArry) {
      this.imageArry[i].duration = this.getRandomNumber();
    }
  }

  getRandomNumber() {
    return Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
  }
}

Template

<ng-container *ngFor="let item of imageArry">
  <app-image-reveal 
    [imageUrl]="item.imageUrl" 
    [duration]="item.duration">
  </app-image-reveal>
</ng-container>

💡 Why this works better

• Each image gets a different duration (3s–5s)
• Prevents all animations from running simultaneously
• Creates a natural staggered reveal effect
• Improves UI/UX significantly

⚙️ Inputs

| Input | Type | Default | Description | |------|------|--------|------------| | imageUrl | string | '' | Image URL to reveal | | fillColor | string | '#898989' | Background color | | startValue | number | 0 | Starting progress value | | endValue | number | 100 | Ending progress value | | duration | number | 3000 | Animation duration (ms) | | showProgress | boolean | true | Show/hide progress indicator | | progressSize | string | '13px' | Progress text size | | progressColor | string | '#fff' | Progress text color |

🎨 Example

<app-image-reveal
  [imageUrl]="'https://picsum.photos/800/400'"
  [duration]="2000"
  [showProgress]="true">
</app-image-reveal>

📄 License

MIT License

🙌 Author

Nawaz Aideveloper