feat(UI组件模块): 新增Spinner模块，Spinner组件

src/app/simple/spinner/index.ts

@@ -0,0 +1 @@
+export * from './spinner.module';

src/app/simple/spinner/spinner.component.html

@@ -0,0 +1,7 @@
+<div class="sim-spinner-loading" *ngIf="loading">
+    <span class="sim-spinner-loading-dot"><i></i><i></i><i></i><i></i></span>
+    <div class="sim-spinner-loading-text">{{_tips}}</div>
+</div>
+<div class="sim-spinner-container" [ngClass]="{'sim-spinner-masking': loading}">
+    <ng-content></ng-content>
+</div>

src/app/simple/spinner/spinner.component.scss

@@ -0,0 +1,94 @@
+.sim-spinner {
+    position: relative;
+    display: block;
+    &-loading {
+        position: absolute;
+        height: 100%;
+        max-height: 320px;
+        width: 100%;
+        z-index: 4;
+        color: #108ee9;
+        vertical-align: middle;
+        text-align: center;
+        transition: transform .3s cubic-bezier(.78, .14, .15, .86);
+        font-size: 12px;
+        &-text {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            padding-top: 24px;
+        }
+        &-dot {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin: -16px;
+            width: 32px;
+            height: 32px;
+            transform: rotate(45deg);
+            animation: rotate 1.2s infinite linear;
+            i {
+                width: 14px;
+                height: 14px;
+                border-radius: 100%;
+                background-color: #108ee9;
+                -webkit-transform: scale(.75);
+                transform: scale(.75);
+                display: block;
+                position: absolute;
+                opacity: .3;
+                animation: spinnerMove 1s infinite linear alternate;
+                -webkit-transform-origin: 50% 50%;
+                transform-origin: 50% 50%;
+            }
+            i:first-child {
+                left: 0;
+                top: 0;
+            }
+            i:nth-child(2) {
+                right: 0;
+                top: 0;
+                animation-delay: .4s;
+            }
+            i:nth-child(3) {
+                right: 0;
+                bottom: 0;
+                animation-delay: .8s;
+            }
+            i:nth-child(4) {
+                left: 0;
+                bottom: 0;
+                animation-delay: 1.2s;
+            }
+        }
+    }
+    &-container {
+        position: relative;
+        z-index: 1;
+    }
+    &-masking:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: #fff;
+        opacity: .3;
+        transition: all .3s;
+        z-index: 10;
+    }
+}
+
+@keyframes rotate {
+    to {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg)
+    }
+}
+
+@keyframes spinnerMove {
+    to {
+        opacity: 1
+    }
+}

src/app/simple/spinner/spinner.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerComponent } from './spinner.component';
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SpinnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/simple/spinner/spinner.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input } from '@angular/core';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'sim-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SpinnerComponent implements OnInit {
+  @HostBinding('class.sim-spinner') _simSpinner = true;
+
+  @Input() loading = true;
+
+  _tips = '正在读取数据...';
+  @Input()
+  get tips(): string {
+    return this._tips;
+  }
+  set tips(value: string) {
+    this._tips = value;
+  }
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+

src/app/simple/spinner/spinner.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpinnerComponent } from './spinner.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [SpinnerComponent],
+  exports: [SpinnerComponent]
+})
+export class SpinnerModule { }