From 9b2ceb347a3371819fcad6bbe2268203afecaf4e Mon Sep 17 00:00:00 2001
From: "Stone, Avi (as206k)" <as206k@att.com>
Date: Thu, 12 Apr 2018 16:36:39 +0300
Subject: DCAE-D fe initial commit

DCAE-D fe initial commit

Change-Id: Ica8ccb7c7ef769c969664d1e168d205eb9fc67f2
Issue-ID: SDC-1218
Signed-off-by: Stone, Avi (as206k) <as206k@att.com>
---
 public/src/app/loader/loader.component.html    |   4 +
 public/src/app/loader/loader.component.scss    | 152 +++++++++++++++++++++++++
 public/src/app/loader/loader.component.spec.ts |  26 +++++
 public/src/app/loader/loader.component.ts      |  12 ++
 4 files changed, 194 insertions(+)
 create mode 100644 public/src/app/loader/loader.component.html
 create mode 100644 public/src/app/loader/loader.component.scss
 create mode 100644 public/src/app/loader/loader.component.spec.ts
 create mode 100644 public/src/app/loader/loader.component.ts

(limited to 'public/src/app/loader')

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() {}
+}
-- 
cgit 1.2.3-korg