summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/spinner
diff options
context:
space:
mode:
authorSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
committerSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
commitff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch)
treeaae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/shared/components/spinner
parentc72d565bb58226b20625b2bce5f0019046bee649 (diff)
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/spinner')
-rw-r--r--vid-webpack-master/src/app/shared/components/spinner/spinner.component.html2
-rw-r--r--vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss87
-rw-r--r--vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts42
-rw-r--r--vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts18
4 files changed, 149 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
new file mode 100644
index 000000000..cb11feea8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
@@ -0,0 +1,2 @@
+<div *ngIf="show"
+ class="spinner"></div>
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss
new file mode 100644
index 000000000..d31dfed80
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss
@@ -0,0 +1,87 @@
+.spinner {
+ height: 150px;
+ width: 150px;
+ margin: 0 auto;
+ -webkit-animation: rotation .6s infinite linear;
+ animation: rotation .6s infinite linear;
+ border: 6px solid rgba(0, 174, 239, 0.01);
+ border-radius: 100%;
+ position: absolute;
+ z-index: 1000;
+ left: 50%;
+ right: 50%;
+ top: 50%;
+ bottom: 50%;
+}
+
+
+
+.spinner:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: -6px;
+ height: 100%;
+ width: 100%;
+ border-top: 6px solid #009fdb;
+ border-left: 6px solid transparent;
+ border-bottom: 6px solid #c3161600;
+ border-right: 6px solid transparent;
+ border-radius: 100%;
+}
+
+@-webkit-keyframes rotation {
+ from {-webkit-transform: rotate(0deg);}
+ to {-webkit-transform: rotate(359deg);}
+}
+@-moz-keyframes rotation {
+ from {-moz-transform: rotate(0deg);}
+ to {-moz-transform: rotate(359deg);}
+}
+@-o-keyframes rotation {
+ from {-o-transform: rotate(0deg);}
+ to {-o-transform: rotate(359deg);}
+}
+@keyframes rotation {
+ from {transform: rotate(0deg);}
+ to {transform: rotate(359deg);}
+}
+
+.spinner-sm {
+ height:16px;
+ width:16px;
+}
+
+.spinner-md {
+ height:40px;
+ width:40px;
+}
+
+.spinner-lr {
+ height:150px;
+ width:150px;
+}
+
+.spinner-red {
+ border:6px solid rgba(216, 27, 34, .15);
+}
+
+.spinner-red:before {
+ border-top:6px solid rgba(216, 27, 34, 1);
+}
+
+.spinner-green {
+ border:6px solid rgba(40, 183, 121, .15);
+}
+
+.spinner-green:before {
+ border-top:6px solid rgba(40, 183, 121, 1);
+}
+
+.spinner-grey {
+ border:6px solid rgba(139, 146, 154, .15);
+}
+
+.spinner-grey:before {
+ border-top:6px solid rgba(139, 146, 154, 1);
+}
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
new file mode 100644
index 000000000..531ee8c62
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
@@ -0,0 +1,42 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { SpinnerComponent } from './spinner.component';
+
+describe('Spinner component', () => {
+ let component: SpinnerComponent;
+ let fixture: ComponentFixture<SpinnerComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [HttpClientTestingModule],
+ providers: [],
+ declarations: [SpinnerComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SpinnerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('component should be defined', () => {
+ expect(component).toBeDefined();
+ });
+
+
+ it('component constructor should subscribe of showSpinner event with true', ()=> {
+ SpinnerComponent.showSpinner.next(true);
+ expect(component.show).toBeTruthy();
+ });
+
+ it('component constructor should subscribe of showSpinner event with false', ()=> {
+ SpinnerComponent.showSpinner.next(false);
+ expect(component.show).toBeFalsy();
+ });
+
+
+
+
+});
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
new file mode 100644
index 000000000..0ce5d2074
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Component({
+ selector : 'spinner-component',
+ templateUrl : './spinner.component.html',
+ styleUrls : ['./spinner.component.scss']
+})
+export class SpinnerComponent {
+ show : boolean = false;
+ static showSpinner: Subject<boolean> = new Subject<boolean>();
+
+ constructor(){
+ SpinnerComponent.showSpinner.subscribe((status) => {
+ this.show = status;
+ })
+ }
+}