[HIMA-62] - Loading animation component with debug example

src/app/modules/debug/debug.module.ts

@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
 import { NewsletterDebugComponent } from './newsletter-debug/newsletter-debug.component';
 import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
 import { RecommendationDebugComponent } from './recommendations-animation/recommendations-animation.component';
+import { LoadingAnimationComponent } from './loading-animation/loading-animation.component';
 
 const routes: Routes = [
   {
@@ -21,6 +22,10 @@ const routes: Routes = [
     path: 'recom',
     component: RecommendationDebugComponent
   },
+  {
+    path: 'loading',
+    component: LoadingAnimationComponent
+  },
   { path: '**', redirectTo: 'card-stack' }
 ];
 
@@ -35,6 +40,7 @@ const routes: Routes = [
   declarations: [
     RecommendationDebugComponent,
     CardStackAnimationComponent,
+    LoadingAnimationComponent,
     NewsletterDebugComponent
   ]
 })

src/app/modules/debug/loading-animation/loading-animation.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loading-animation',
+  template: `
+    <app-loading
+      [loading]="isLoading"
+      (click)="isLoading = !isLoading"
+      text="Animation loading text"
+    ></app-loading>
+  `
+})
+export class LoadingAnimationComponent implements OnInit {
+  isLoading = true;
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/shared/components/loading/loading.component.scss

@@ -0,0 +1,27 @@
+:host() {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  min-height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+span {
+  margin-top: 16px;
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-size: 16px;
+  color: rgba(90, 114, 138, 1);
+}
+.rotate {
+  margin-top: 10px;
+  animation: spin 1.5s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/app/shared/components/loading/loading.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  trigger,
+  transition,
+  query,
+  stagger,
+  animate,
+  style,
+  state
+} from '@angular/animations';
+
+@Component({
+  selector: 'app-loading',
+  template: `
+    <ng-container *ngIf="loading" [@loading]="loading">
+      <img
+        src="/assets/images/Icon_Loading.svg"
+        class="rotate"
+        [@loading]="loading"
+      />
+      <span>{{ text }}</span>
+    </ng-container>
+  `,
+  styleUrls: ['loading.component.scss'],
+  animations: [
+    trigger('loading', [
+      state('void', style({ opacity: 0, transform: 'translateY(-100%)' })),
+      transition(':enter', [
+        animate('0.2s ease-in'),
+        style({ opacity: 1, transform: 'translateY(0)' })
+      ]),
+      transition(':leave', [
+        animate(
+          '0.2s ease-in',
+          style({ opacity: 0, transform: 'translateY(-100%)' })
+        )
+      ])
+    ])
+  ]
+})
+export class LoadingComponent implements OnInit {
+  @Input() loading = false;
+  @Input() text = '';
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/shared/shared.module.ts

@@ -1,8 +1,9 @@
 import { CardComponent } from './components/card/card.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { LoadingComponent } from './components/loading/loading.component';
 
-const components = [CardComponent];
+const components = [CardComponent, LoadingComponent];
 @NgModule({
   imports: [CommonModule],
   exports: [...components],

src/assets/images/Icon_Loading.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon_Loading</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_07_Hugendubel_Instoreapp_Kunden_Artikelrecherche_Ergebnisse_2_loadmore" transform="translate(-364.000000, -831.000000)" fill="#5A728A">
+            <path d="M375.296923,859.703077 C375.897692,860.303846 375.897692,861.277692 375.296923,861.878462 L372.033077,865.142308 C371.432308,865.743077 370.458462,865.743077 369.857692,865.142308 C369.256923,864.541538 369.256923,863.567692 369.857692,862.966923 L373.121538,859.703077 C373.722308,859.102308 374.696154,859.102308 375.296923,859.703077 Z M398.142308,836.857692 C398.743077,837.458462 398.743077,838.432308 398.142308,839.033077 L394.878462,842.296923 C394.277692,842.897692 393.303846,842.897692 392.703077,842.296923 C392.102308,841.696154 392.102308,840.722308 392.703077,840.121538 L395.966923,836.857692 C396.566923,836.256923 397.541538,836.256923 398.142308,836.857692 Z M371.692308,851 C371.692308,851.85 371.003846,852.538462 370.153846,852.538462 L365.538462,852.538462 C364.688462,852.538462 364,851.85 364,851 C364,850.15 364.688462,849.461538 365.538462,849.461538 L370.153846,849.461538 C371.003846,849.461538 371.692308,850.15 371.692308,851 Z M404,851 C404,851.85 403.311538,852.538462 402.461538,852.538462 L397.846154,852.538462 C396.996154,852.538462 396.307692,851.85 396.307692,851 C396.307692,850.15 396.996154,849.461538 397.846154,849.461538 L402.461538,849.461538 C403.311538,849.461538 404,850.15 404,851 Z M375.296923,842.296923 C374.696154,842.897692 373.722308,842.897692 373.121538,842.296923 L369.857692,839.033077 C369.256923,838.432308 369.256923,837.458462 369.857692,836.857692 C370.458462,836.256923 371.432308,836.256923 372.033077,836.857692 L375.296923,840.121538 C375.897692,840.722308 375.897692,841.696154 375.296923,842.296923 Z M398.142308,865.142308 C397.541538,865.743077 396.567692,865.743077 395.966923,865.142308 L392.703077,861.878462 C392.102308,861.277692 392.102308,860.303846 392.703077,859.703077 C393.303846,859.102308 394.277692,859.102308 394.878462,859.703077 L398.142308,862.966923 C398.743077,863.566923 398.743077,864.541538 398.142308,865.142308 Z M384,838.692308 C383.15,838.692308 382.461538,838.003846 382.461538,837.153846 L382.461538,832.538462 C382.461538,831.688462 383.15,831 384,831 C384.85,831 385.538462,831.688462 385.538462,832.538462 L385.538462,837.153846 C385.538462,838.003846 384.85,838.692308 384,838.692308 Z M384,871 C383.15,871 382.461538,870.311538 382.461538,869.461538 L382.461538,864.846154 C382.461538,863.996154 383.15,863.307692 384,863.307692 C384.85,863.307692 385.538462,863.996154 385.538462,864.846154 L385.538462,869.461538 C385.538462,870.311538 384.85,871 384,871 Z" id="Icon_Loading"></path>
+        </g>
+    </g>
+</svg>