From c5ad1b278a7493b24364a962d0bb296738efc9af Mon Sep 17 00:00:00 2001
From: Imran Khan <imransilvake@gmail.com>
Date: Fri, 25 Dec 2020 09:38:29 +0100
Subject: [PATCH] feat: add new loader

---
 .stylelintrc                                  |  2 +-
 .../components/photography.component.html     |  4 +--
 .../components/photography.component.scss     |  9 -------
 .../components/loader/loader.component.html   |  3 +++
 .../components/loader/loader.component.scss   | 27 +++++++++++++++++++
 .../components/loader/loader.component.ts     | 11 ++++++++
 .../widgets.mod/widgets.module.ts             |  7 +++--
 7 files changed, 49 insertions(+), 14 deletions(-)
 create mode 100644 src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.html
 create mode 100644 src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.scss
 create mode 100644 src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.ts

diff --git a/.stylelintrc b/.stylelintrc
index 0a92393..6888aba 100755
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -22,7 +22,7 @@
 		"string-no-newline": true,
 		"string-quotes": "single",
 
-		"unit-blacklist": ["em"],
+		"unit-disallowed-list": ["em"],
 		"unit-case": "lower",
 		"unit-no-unknown": true,
 
diff --git a/src/app/packages/modules.pck/photography.mod/components/photography.component.html b/src/app/packages/modules.pck/photography.mod/components/photography.component.html
index 2348e16..68e6437 100644
--- a/src/app/packages/modules.pck/photography.mod/components/photography.component.html
+++ b/src/app/packages/modules.pck/photography.mod/components/photography.component.html
@@ -1,8 +1,8 @@
 <div class="ik-photography">
 	<div class="cd-container-fluid">
 		<!-- Loader -->
-		<div class="ik-page-loader" *ngIf="!isPageLoaded; else elseContent">
-			<img [src]="'/assets/svg/loader.svg'" [alt]="'loader'" />
+		<div *ngIf="!isPageLoaded; else elseContent">
+			<app-loader></app-loader>
 		</div>
 
 		<!-- Content -->
diff --git a/src/app/packages/modules.pck/photography.mod/components/photography.component.scss b/src/app/packages/modules.pck/photography.mod/components/photography.component.scss
index 1d8fab1..fd8ae23 100644
--- a/src/app/packages/modules.pck/photography.mod/components/photography.component.scss
+++ b/src/app/packages/modules.pck/photography.mod/components/photography.component.scss
@@ -3,15 +3,6 @@
 .ik-photography {
 	background-color: var(--tc4);
 
-	.ik-page-loader {
-		margin-top: 30px;
-		text-align: center;
-
-		.ik-icon {
-			font-size: cd-fontSize(s40);
-		}
-	}
-
 	.ik-slider-wrapper {
 		.ik-photo {
 			position: relative;
diff --git a/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.html b/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.html
new file mode 100644
index 0000000..a44f60a
--- /dev/null
+++ b/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.html
@@ -0,0 +1,3 @@
+<div class="ik-loader">
+    <div class="ik-loader-bar"></div>
+</div>
\ No newline at end of file
diff --git a/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.scss b/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.scss
new file mode 100644
index 0000000..33ff944
--- /dev/null
+++ b/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.scss
@@ -0,0 +1,27 @@
+.ik-loader {
+	height: 3px;
+	margin: 20px auto;
+	overflow: hidden;
+	position: relative;
+	width: 200px;
+
+	.ik-loader-bar {
+		animation: sideToside 2s ease-in-out infinite;
+		background-color: var(--c8);
+		border-radius: 5px;
+		height: 100%;
+		position: absolute;
+		width: 50%;
+	}
+}
+
+@keyframes sideToside {
+	0%,
+	100% {
+		transform: translateX(-50%);
+	}
+
+	50% {
+		transform: translateX(150%);
+	}
+}
diff --git a/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.ts b/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.ts
new file mode 100644
index 0000000..8331fcb
--- /dev/null
+++ b/src/app/packages/utilities.pck/widgets.mod/components/loader/loader.component.ts
@@ -0,0 +1,11 @@
+// angular
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-loader',
+	templateUrl: './loader.component.html',
+	styleUrls: ['./loader.component.scss']
+})
+
+export class LoaderComponent {
+}
diff --git a/src/app/packages/utilities.pck/widgets.mod/widgets.module.ts b/src/app/packages/utilities.pck/widgets.mod/widgets.module.ts
index 1218ab6..aec5a72 100755
--- a/src/app/packages/utilities.pck/widgets.mod/widgets.module.ts
+++ b/src/app/packages/utilities.pck/widgets.mod/widgets.module.ts
@@ -10,6 +10,7 @@ import { CardInfoComponent } from './components/card/info/card-info.component';
 import { CardNoticeComponent } from './components/card/notice/card-notice.component';
 import { CardListComponent } from './components/card/list/card-list.component';
 import { CardCodeComponent } from './components/card/code/card-code.component';
+import { LoaderComponent } from './components/loader/loader.component';
 
 @NgModule({
 	imports: [
@@ -22,12 +23,14 @@ import { CardCodeComponent } from './components/card/code/card-code.component';
 		CardInfoComponent,
 		CardNoticeComponent,
 		CardListComponent,
-		CardCodeComponent
+		CardCodeComponent,
+		LoaderComponent
 	],
 	exports: [
 		PhotoGalleryComponent,
 		SliderComponent,
-		CardComponent
+		CardComponent,
+		LoaderComponent
 	]
 })