diff --git a/package-lock.json b/package-lock.json
index ff11997..2faf647 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11130,6 +11130,15 @@
"tslib": "^1.9.0"
}
},
+ "ngx-perfect-scrollbar": {
+ "version": "9.0.0",
+ "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-9.0.0.tgz",
+ "integrity": "sha512-jiFrOLONf/w2PjSKkEjQeTnMdlMVcQgjzIrYcsor1HWTmE+95J2sZAd/WF4zoutbpIqfU8VQQoAp8HOa7U1c/g==",
+ "requires": {
+ "perfect-scrollbar": "1.5.0",
+ "resize-observer-polyfill": "^1.5.0"
+ }
+ },
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -12158,6 +12167,11 @@
"sha.js": "^2.4.8"
}
},
+ "perfect-scrollbar": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+ "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA=="
+ },
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -13621,6 +13635,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
+ "resize-observer-polyfill": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+ },
"resolve": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.16.1.tgz",
diff --git a/package.json b/package.json
index 8472fd4..76871e7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"docx": "^5.0.2",
"firebase": ">= 5.5.7 <8",
"ngx-mat-select-search": "^2.1.2",
+ "ngx-perfect-scrollbar": "^9.0.0",
"rxjs": "~6.5.5",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6829970..a7ebdc4 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,6 @@
-
-
-
+
+
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9766a5a..7cf39a9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
import {fader} from './animations';
@Component({
@@ -7,6 +7,13 @@ import {fader} from './animations';
styleUrls: ['./app.component.less'],
animations: [fader]
})
-export class AppComponent {
+export class AppComponent implements OnInit {
+ public static hideLoader = () => document.querySelector('#load-bg').classList.add('hidden');
+
+ public ngOnInit(): void {
+ setTimeout(() => AppComponent.hideLoader(), 800);
+
+ }
+
title = 'wgenerator';
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e55c351..d2bc0b2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,6 +15,7 @@ import {AngularFireAuthModule} from '@angular/fire/auth';
import {AngularFireAuthGuardModule} from '@angular/fire/auth-guard';
import {MAT_DATE_LOCALE} from '@angular/material/core';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
@NgModule({
declarations: [
@@ -36,6 +37,7 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
AngularFireAuthModule,
AngularFireAuthGuardModule,
FontAwesomeModule,
+ PerfectScrollbarModule,
],
providers: [
diff --git a/src/index.html b/src/index.html
index ae2de4e..16edabf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -33,14 +33,24 @@
align-items: center;
}
+ #load-bg.hidden {
+ animation: fade 1s forwards;
+ }
+
#load-bg svg {
width: 512px;
height: 512px;
+ margin: 40px;
}
#gear-lg {
- / / animation: spin 5 s infinite linear;
- transform-origin: 50% 50%;
+ animation: spin 12s infinite linear;
+ transform-origin: 118.70226433741132px 128.5002496697699px;
+ }
+
+ #gear-sm {
+ animation: spin 4s infinite reverse linear;
+ transform-origin: 230.07229448094552px 229.53152747947914px;
}
@keyframes spin {
@@ -51,6 +61,24 @@
transform: rotate(359deg);
}
}
+
+ @keyframes fade {
+ 0% {
+ transform: translateX(0);
+ opacity: 1
+ }
+ 99% {
+ transform: translateX(0);
+ opacity: 0
+ }
+ to {
+ transform: translateX(-100%);
+ opacity: 0
+ }
+
+ }
+
+
@@ -60,273 +88,78 @@
-