Add new components, styles, and services for user management and navigation

2025-06-25 13:50:14 +03:00
parent 13a8ff4494
commit 5dc79438b7
42 changed files with 1439 additions and 0 deletions
@@ -0,0 +1,64 @@
+.sk-line-material {
+  top: 0;
+  position: relative;
+  margin: auto;
+  width: 100%;
+}
+
+.sk-line-material .sk-child {
+  width: 100%;
+  height: 4px;
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  transform-origin: 0% 0%;
+  -webkit-animation: sk-line-material 2s ease-in-out 0s infinite both;
+  animation: sk-line-material 2s ease-in-out 0s infinite both;
+}
+
+@-webkit-keyframes sk-line-material {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scaleX(0);
+    transform: scaleX(0);
+  }
+  40% {
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
+  }
+}
+
+@keyframes sk-line-material {
+  0% {
+    -webkit-transform: scaleX(0);
+    transform: scaleX(0);
+  }
+  100% {
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
+  }
+}
+
+#http-loader {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 9999;
+}
+
+.loader-bg {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  filter: alpha(opacity=70);
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.colored-parent,
+.colored > div {
+  background-color: rgba(26, 188, 156, 0.8);
+}
@@ -0,0 +1,11 @@
+export const Spinkit = {
+  skChasingDots: 'sk-chasing-dots',
+  skCubeGrid: 'sk-cube-grid',
+  skDoubleBounce: 'sk-double-bounce',
+  skRotatingPlane: 'sk-rotationg-plane',
+  skSpinnerPulse: 'sk-spinner-pulse',
+  skThreeBounce: 'sk-three-bounce',
+  skWanderingCubes: 'sk-wandering-cubes',
+  skWave: 'sk-wave',
+  skLine: 'sk-line-material'
+};
@@ -0,0 +1,11 @@
+@if (isSpinnerVisible) {
+  <div id="http-loader">
+    <div class="loader-bg">
+      @if (spinner() === Spinkit.skLine) {
+        <div class="sk-line-material" [class.colored]="!backgroundColor()">
+          <div class="sk-child sk-bounce1" [style.background-color]="backgroundColor()"></div>
+        </div>
+      }
+    </div>
+  </div>
+}
@@ -0,0 +1,22 @@
+#http-loader {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  z-index: 9999;
+}
+
+.loader-bg {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  filter: alpha(opacity=70);
+  opacity: 0.7;
+  background-color: #f1f1f1;
+}
+
+.colored-parent,
+.colored > div {
+  background-color: #333;
+}
@@ -0,0 +1,46 @@
+// Angular import
+import { Component, OnDestroy, ViewEncapsulation, inject, input } from '@angular/core';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+
+// project import
+import { Spinkit } from './spinkits';
+
+@Component({
+  selector: 'app-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss', './spinkit-css/sk-line-material.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SpinnerComponent implements OnDestroy {
+  private router = inject(Router);
+  private document = inject<Document>(DOCUMENT);
+
+  // public props
+  isSpinnerVisible = true;
+  Spinkit = Spinkit;
+  backgroundColor = input('#1890ff');
+  spinner = input(Spinkit.skLine);
+
+  // Constructor
+  constructor() {
+    this.router.events.subscribe(
+      (event) => {
+        if (event instanceof NavigationStart) {
+          this.isSpinnerVisible = true;
+        } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
+
+          this.isSpinnerVisible = false;
+        }
+      },
+      () => {
+        this.isSpinnerVisible = false;
+      }
+    );
+  }
+
+  // life cycle event
+  ngOnDestroy(): void {
+    this.isSpinnerVisible = false;
+  }
+}