Create a Reusable Angular Loading Spinner Component

When building Angular applications, enhancing user experience (UX) with visual cues is paramount. A loading spinner overlay component is a perfect solution to inform users that something is processing in the background. This tutorial will guide you through creating a reusable Angular Loading Spinner Component and a Global Loading Overlay. We’ll walk through step-by-step implementation, showcase real-world usage, and explore optimization tips.

Why Use an Angular Loading Spinner Overlay?

An angular loading spinner overlay improves user interaction by providing feedback when actions, such as API calls or complex calculations, are in progress. Using reusable components, we can standardize this behavior, making it easier to maintain and scale.

Benefits of Using a Reusable Component:

Consistency: A unified design across the app.

Flexibility: Customizable size, color, and messages.
Reusability: Saves development time and effort.

Watch the Angular Loading Spinner Overlay component in Action!

Check out this quick video to see how the angular Loading Spinner Overlay component works with a real example!

<dnc-loading-overlay [visible]="(dncLoadingService.isLoading$ | async) ?? false"
                     [message]="'Loading, please wait...'"
                     [overlayColor]="'rgba(0, 0, 0, 0.5)'"
                     [spinnerSize]="60"
                     [spinnerColor]="'#fff'"></dnc-loading-overlay>

If you’re interested in creating a reusable loading spinner component in other frameworks, you might find my Creating a Blazor loading spinner component Guide helpful

Note: The Modal Component used in this example can be found here. Make sure to integrate it seamlessly with the loading overlay for a consistent user experience.

Set Up Your Angular Project

We use the new command of the Angular CLI. We pass the name of the application that we want to create as an option. To do so, go to a folder of your choice and type the following.

ng new dnc-loading

reusable angular loading spinner component project created

Creating the Angular Loading Spinner Overlay Component

The DncLoadingOverlayComponent displays a full-page overlay with a spinner and an optional message. It’s great for scenarios where you need to block the entire screen during long-running processes.

Here’s the Angular code for the Loading Overlay Component:

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'dnc-loading-overlay',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div *ngIf="visible" class="overlay" [ngStyle]="{ backgroundColor: overlayColor }">
      <div class="spinner" [ngStyle]="{
        width: spinnerSize + 'px',
        height: spinnerSize + 'px',
        borderTopColor: spinnerColor,
        borderRightColor: spinnerColor,
        borderBottomColor: spinnerColor
      }"></div>
      <div *ngIf="message" class="message">{{ message }}</div>
    </div>
  `,
  styles: [
    `
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2000;
      }
      .spinner {
        border: 5px solid transparent; /* Transparent border */
        border-top: 5px solid black; /* Visible color for top */
        border-right: 5px solid black; /* Visible color for right */
        border-bottom: 5px solid black; /* Visible color for bottom */
        border-radius: 50%; /* Circular shape */
        animation: spin 1s linear infinite; /* Smooth spin */
      }
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .message {
        margin-top: 20px;
        font-size: 1.2em;
        color: #333;
        text-align: center;
      }
    `,
  ],
})
export class DncLoadingOverlayComponent {
  @Input() visible: boolean = false; 
  @Input() message: string | null = null; 
  @Input() overlayColor: string = 'rgba(255, 255, 255, 0.8)'; 
  @Input() spinnerSize: number = 40; 
  @Input() spinnerColor: string = '#000'; 
}

Using Loading Overlay Globally

You need a global loading indicator to display during HTTP requests or long-running tasks. Here’s how to set it up:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DncLoadingService {
  private loadingSubject = new BehaviorSubject<boolean>(false);
  isLoading$ = this.loadingSubject.asObservable();

  show() {
    this.loadingSubject.next(true);
  }

  hide() {
    this.loadingSubject.next(false);
  }
  constructor() { }
}

To automatically show and hide the loading overlay during API calls, we need to To display the overlay globally, include angular loading spinner overlay component in our AppComponent and leverage Angular’s HTTP Interceptor as you will see in the next section.

Global Loading Overlay for HTTP Requests

Include the loading spinner component in the AppComponent as shown below.

<router-outlet></router-outlet>

<dnc-loading-overlay [visible]="(dncLoadingService.isLoading$ | async) ?? false"
                     [message]="'Loading, please wait...'"
                     [overlayColor]="'rgba(0, 0, 0, 0.5)'"
                     [spinnerSize]="60"
                     [spinnerColor]="'#fff'"></dnc-loading-overlay>

To automatically show and hide the loading overlay during API calls, leverage Angular’s HTTP Interceptor.

Implementing the Interceptor:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { delay, finalize } from 'rxjs/operators';
import { DncLoadingService } from '../services/dnc-loading.service';

@Injectable()
export class DncLoadingInterceptor implements HttpInterceptor {
  constructor(private loadingService: DncLoadingService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loadingService.show();
    return next.handle(req).pipe(finalize(() => this.loadingService.hide()));
    /*return next.handle(req).pipe(delay(3000), finalize(() => this.loadingService.hide()));*/ // Simulate delay for test
  }
}

Finally, Add the interceptor to the providers’ array in your AppModule:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    DncLoadingOverlayComponent
  ],
  providers: [{ provide: HTTP_INTERCEPTORS, useClass: DncLoadingInterceptor, multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Testing The Component

Spinner Customization:

Adjust the spinnerSize and spinnerColor inputs for a tailored look.
Example: <dnc-loading-overlay [spinnerSize]="80" [spinnerColor]="'green'"></dnc-loading-overlay>

Message Display:
Add a user-friendly message using the message input.
Example: <dnc-loading-overlay [message]="'Fetching data...'"></dnc-loading-overlay>

Global Integration:
Verify that the overlay appears automatically during API calls and disappears once complete.

Angular Loading Spinner Overlay component in Action

Features of the Angular Loading Spinner Overlay Component

Dynamic visibility: Easily toggle the overlay visibility using a simple visible property.
Customizable spinner: Adjust the spinner’s size and color to match your application’s design.

Overlay color: Personalize the background color and opacity with the overlayColor property for better UX.
Message support: Display an optional message to keep users informed during background processes.
Standalone and reusable: A lightweight, standalone component that can be reused across multiple projects.

Global service integration: Seamlessly control the spinner globally using the DncLoadingService.
Reactive-friendly: Easily integrate with Angular’s Reactive Forms or HttpClient for consistent feedback on API calls or form submissions.

Conclusion

With the DncLoadingOverlayComponent and DncLoadingService, creating a reusable and global Angular loading spinner becomes straightforward. This approach enhances UI consistency and UX quality, making your application more professional and user-friendly.