4 files changed, 194 insertions, 0 deletions
diff --git a/public/src/app/loader/loader.component.html b/public/src/app/loader/loader.component.html
new file mode 100644
index 0000000..55a8f4c
--- /dev/null
+++ b/public/src/app/loader/loader.component.html
@@ -0,0 +1,4 @@
+<!-- loader -->
+<div class="tlv-loader-block">
+</div>
+<div class="tlv-loader large" style="z-index: 10002;" data-tests-id="loader"></div>
diff --git a/public/src/app/loader/loader.component.scss b/public/src/app/loader/loader.component.scss
new file mode 100644
index 0000000..621adba
--- /dev/null
+++ b/public/src/app/loader/loader.component.scss
@@ -0,0 +1,152 @@
+.tlv-loader-block {
+  background-color: #ffffff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  opacity: 0.5;
+}
+
+.tlv-loader {
+  height: 63px;
+  width: 63px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.tlv-loader.small {
+  -webkit-transform: scale(0.26);
+  transform: scale(0.26);
+  margin-top: -36.5px;
+  margin-left: -36.5px;
+}
+
+.tlv-loader.medium {
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  margin-top: -26.5px;
+  margin-left: -26.5px;
+}
+
+.tlv-loader.large {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  margin-top: -10.5px;
+  margin-left: -10.5px;
+}
+
+.tlv-loader::before {
+  background-color: #eaeaea;
+  border-radius: 50%;
+  box-shadow: 21px 21px 0px 0px #eaeaea, 0px 42px 0px 0px #eaeaea,
+    -21px 21px 0px 0px #eaeaea;
+  content: '';
+  display: block;
+  height: 21px;
+  width: 21px;
+  position: absolute;
+  left: 50%;
+  margin-left: -10.5px;
+}
+
+.tlv-loader::after {
+  border-radius: 50%;
+  content: '';
+  display: block;
+  position: absolute;
+  height: 21px;
+  width: 21px;
+  -webkit-animation: dot-move 4.5s infinite ease-in;
+  animation: dot-move 4.5s infinite ease-in;
+}
+
+@keyframes dot-move {
+  0% {
+    background-color: #3bb2df;
+    left: 21px;
+    top: 0;
+  }
+  6.25% {
+    background-color: #3bb2df;
+    left: 42px;
+    top: 21px;
+  }
+  12.5% {
+    background-color: #3bb2df;
+    left: 21px;
+    top: 42px;
+  }
+  18.75% {
+    background-color: #3bb2df;
+    left: 0;
+    top: 21px;
+  }
+  25% {
+    background-color: #ffb81c;
+    left: 21px;
+    top: 0;
+  }
+  31.25% {
+    background-color: #ffb81c;
+    left: 42px;
+    top: 21px;
+  }
+  37.5% {
+    background-color: #ffb81c;
+    left: 21px;
+    top: 42px;
+  }
+  43.75% {
+    background-color: #ffb81c;
+    left: 0;
+    top: 21px;
+  }
+  50% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 0;
+  }
+  56.25% {
+    background-color: #caa2dd;
+    left: 42px;
+    top: 21px;
+  }
+  62.5% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 42px;
+  }
+  68.75% {
+    background-color: #caa2dd;
+    left: 0;
+    top: 21px;
+  }
+  75% {
+    background-color: #d9e51c;
+    left: 21px;
+    top: 0;
+  }
+  81.25% {
+    background-color: #d9e51c;
+    left: 42px;
+    top: 21px;
+  }
+  87.5% {
+    background-color: #d9e51c;
+    left: 21px;
+    top: 42px;
+  }
+  93.75% {
+    background-color: #d9e51c;
+    left: 0;
+    top: 21px;
+  }
+  100% {
+    background-color: #3bb2df;
+    left: 21px;
+    top: 0;
+  }
+}
diff --git a/public/src/app/loader/loader.component.spec.ts b/public/src/app/loader/loader.component.spec.ts
new file mode 100644
index 0000000..7c82913
--- /dev/null
+++ b/public/src/app/loader/loader.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        declarations: [LoaderComponent]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/public/src/app/loader/loader.component.ts b/public/src/app/loader/loader.component.ts
new file mode 100644
index 0000000..89403b2
--- /dev/null
+++ b/public/src/app/loader/loader.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}