Creating a Custom Loading Spinner Component in Angular

Creating a custom loading spinner in Angular can enhance user experience by providing visual feedback during data loading processes. Angular’s component-based architecture makes it straightforward to develop reusable UI elements like spinners. In this guide, we’ll walk through the steps to build a simple, customizable loading spinner component.

Step 1: Generate a New Component

Start by generating a new component using Angular CLI. Open your terminal and run:

ng generate component loading-spinner

Step 2: Design the Spinner Template

Open loading-spinner.component.html and add the HTML for your spinner. Here’s a simple example using a div with CSS classes:

<div class="spinner">

Step 3: Style the Spinner with CSS

In loading-spinner.component.css, define the styles for the spinner. For example:

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top-color: #1d72b8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Step 4: Make the Spinner Reusable

Update loading-spinner.component.ts to accept input properties if needed, such as size or color, to make the component more flexible. For basic usage, the default styles suffice.

Step 5: Use the Spinner in Your Application

Finally, include the spinner component in your templates where you want the loading indicator to appear:

<app-loading-spinner *ngIf="isLoading"></app-loading-spinner>

Conclusion

By following these steps, you can create a custom, reusable loading spinner in Angular. This component can be easily styled and integrated into any part of your application to improve user experience during asynchronous operations.

Table of Contents