feat: add new loader

.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,
 

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 -->

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;

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>

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%);
+	}
+}

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 {
+}

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
 	]
 })