diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/spinner')
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; + }) + } +} |