init commit

src/app/components/ui/global-progress-bar/global-progress-bar.component.css

@@ -0,0 +1,94 @@
+/**
+ * Global Progress Bar Component Styles
+ * Professional Angular Resume Builder - GitHub-style Progress Bar
+ *
+ * @author David Valera Melendez <david@valera-melendez.de>
+ * @created 2025-08-08
+ * @location Made in Germany 🇩🇪
+ */
+
+.global-progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3px;
+  background: var(--gradient-progress);
+  background-size: 200% 100%;
+  z-index: 9999;
+  width: 0%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out, width 0.3s ease-out;
+  animation: shimmer 2s infinite;
+}
+
+.global-progress-bar.active {
+  opacity: 1;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* GitHub-style alternative */
+.global-progress-bar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    var(--color-surface-overlay-medium) 50%, 
+    transparent 100%
+  );
+  animation: loading-shimmer 1.5s infinite;
+}
+
+@keyframes loading-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Professional blue theme */
+.global-progress-bar {
+  background: linear-gradient(90deg, 
+    var(--color-primary), 
+    var(--color-primary), 
+    var(--color-blue-400), 
+    var(--color-primary), 
+    var(--color-primary)
+  );
+  background-size: 300% 100%;
+  box-shadow: 0 0 10px var(--color-blue-glow);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .global-progress-bar {
+    background: linear-gradient(90deg, 
+      var(--color-blue-300), 
+      var(--color-blue-200), 
+      var(--color-blue-100), 
+      var(--color-blue-200), 
+      var(--color-blue-300)
+    );
+    box-shadow: 0 0 10px var(--color-blue-200-glow);
+  }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .global-progress-bar {
+    height: 2px;
+  }
+}

src/app/components/ui/global-progress-bar/global-progress-bar.component.html

@@ -0,0 +1,14 @@
+<!--
+  Global Progress Bar Component Template
+  Professional Angular Resume Builder - GitHub-style Progress Bar
+
+  @author David Valera Melendez <david@valera-melendez.de>
+  @created 2025-08-08
+  @location Made in Germany 🇩🇪
+-->
+
+<div 
+  class="global-progress-bar" 
+  [class.active]="isLoading"
+  [style.width.%]="progress">
+</div>

src/app/components/ui/global-progress-bar/global-progress-bar.component.ts

@@ -0,0 +1,51 @@
+/**
+ * Global Progress Bar Component
+ * Professional Angular Resume Builder - GitHub-style Progress Bar
+ *
+ * @author David Valera Melendez <david@valera-melendez.de>
+ * @created 2025-08-08
+ * @location Made in Germany 🇩🇪
+ */
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { LoadingService } from '../../../services/loading.service';
+
+@Component({
+  selector: 'app-global-progress-bar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './global-progress-bar.component.html',
+  styleUrls: ['./global-progress-bar.component.css']
+})
+export class GlobalProgressBarComponent implements OnInit, OnDestroy {
+  isLoading = false;
+  progress = 0;
+  
+  private destroy$ = new Subject<void>();
+
+  constructor(private loadingService: LoadingService) {}
+
+  ngOnInit(): void {
+    // Subscribe to global loading state
+    this.loadingService.globalLoading$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(loading => {
+        this.isLoading = loading;
+      });
+
+    // Subscribe to progress updates
+    this.loadingService.progress$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(progress => {
+        this.progress = progress;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}