How to Create Loading Spinner in Angular: Simple Guide

To create a loading spinner in Angular, use a boolean variable to track loading state and conditionally show a spinner element with *ngIf. Style the spinner with CSS animations for smooth rotation while data loads.

Syntax

Use a boolean variable in your component to track loading status. Use Angular's *ngIf directive to show or hide the spinner element based on this variable. Style the spinner with CSS animations for rotation.

• loading: boolean variable in component
• *ngIf="loading": shows spinner only when loading is true
• <div class="spinner"></div>: spinner element styled with CSS

typescript/html

export class AppComponent {
  loading = true;
}

<!-- In template -->
<div *ngIf="loading" class="spinner"></div>

Output

A spinner element appears only when loading is true, hidden otherwise.

Example

This example shows a simple Angular component with a loading spinner that appears for 3 seconds, then hides automatically. The spinner is a rotating circle styled with CSS.

typescript/html/css

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="loading" class="spinner" aria-label="Loading"></div>
    <button (click)="loadData()">Load Data</button>
    <p *ngIf="!loading">Data loaded successfully!</p>
  `,
  styles: [
    `
    .spinner {
      margin: 20px auto;
      width: 40px;
      height: 40px;
      border: 4px solid #ccc;
      border-top-color: #007bff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    button {
      display: block;
      margin: 10px auto;
      padding: 8px 16px;
      font-size: 1rem;
    }
    `
  ]
})
export class AppComponent {
  loading = false;

  loadData() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  }
}

Output

When clicking 'Load Data', a blue rotating circle spinner appears for 3 seconds, then disappears showing 'Data loaded successfully!' text.

Common Pitfalls

Common mistakes include:

• Not toggling the loading variable correctly, so spinner never shows or hides.
• Forgetting to add *ngIf on the spinner element, causing it to always display.
• Using blocking code instead of asynchronous calls, freezing UI and spinner.
• Missing CSS animation or incorrect styles, so spinner does not rotate.

Always use asynchronous methods like setTimeout or HTTP calls to update loading state.

typescript

/* Wrong: spinner always visible because loading never changes */
loading = true;

/* Right: toggle loading properly */
loading = false;
loadData() {
  this.loading = true;
  setTimeout(() => this.loading = false, 2000);
}

Quick Reference

Summary tips for Angular loading spinner:

• Use a boolean variable to track loading state.
• Show spinner with *ngIf="loading".
• Style spinner with CSS border and rotation animation.
• Update loading state asynchronously to keep UI responsive.
• Use aria-label for accessibility on spinner.

Key Takeaways

Use a boolean variable and *ngIf to control spinner visibility in Angular.

Style the spinner with CSS border and animation for smooth rotation.

Toggle loading state asynchronously to avoid freezing the UI.

Add accessibility labels to spinner elements for better user experience.

Test spinner behavior by simulating loading delays with setTimeout.