src/app/app.routes.ts

@@ -5,6 +5,7 @@ import {HomeComponent} from "./home/home.component";
 
 export const routes: Routes = [
   {path: 'login', component: LoginComponent},
+  {path: 'test', component: LoginComponent},
   {path: '', component: HomeComponent, canActivate: [AuthGuardService]},
   {path: '**', redirectTo: ''}
 ];

src/app/login/login.component.css

@@ -0,0 +1,6 @@
+.dot-loader {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #555;
+  text-align: center;
+}

src/app/login/login.component.html

@@ -1 +1 @@
-<p>login works!</p>
+<div class="dot-loader">Logging in<span>{{ dots }}</span></div>

src/app/login/login.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {interval, Subscription} from "rxjs";
 
 @Component({
   selector: 'app-login',
@@ -7,6 +8,20 @@ import { Component } from '@angular/core';
   standalone: true,
   styleUrl: './login.component.css'
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit, OnDestroy{
+  dots: string = '';
+  private maxDots: number = 4; // Maximum number of dots
+  private intervalSub!: Subscription;
 
+  ngOnInit(): void {
+    this.intervalSub = interval(500).subscribe(() => {
+      this.dots = this.dots.length < this.maxDots ? this.dots + '.' : '';
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.intervalSub) {
+      this.intervalSub.unsubscribe();
+    }
+  }
 }