src/comps/loading/loading.ts
changeDetection | ChangeDetectionStrategy.OnPush |
selector | loading |
styles |
.spinner {
display: inline-block;
opacity: 1;
border: 3px solid rgba(0,0,0,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
height: 100px;
width: 100px;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
.center {
text-align: center
}
|
template |
|
size
|
|
Defined in src/comps/loading/loading.ts:48
|
src
|
Type: |
Defined in src/comps/loading/loading.ts:40
|
style
|
|
Defined in src/comps/loading/loading.ts:43
|
_size |
_size: |
Defined in src/comps/loading/loading.ts:37
|
_style |
_style: |
Defined in src/comps/loading/loading.ts:36
|
import {Component, Input, ChangeDetectionStrategy} from '@angular/core'
@Component({
selector: 'loading',
styles: [`
.spinner {
display: inline-block;
opacity: 1;
border: 3px solid rgba(0,0,0,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
height: 100px;
width: 100px;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
.center {
text-align: center
}
`],
template: `
<div class="center" [ngStyle]="_style">
<div [ngStyle]="_size" class="spinner"></div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class Loading {
_style: Object;
_size: Object;
@Input()
src: string = '';
@Input('style')
set style(i_style: Object) {
this._style = i_style;
}
@Input('size')
set size(i_size) {
this._size = {
opacity: 1,
height: i_size,
width: i_size
}
}
}