File

src/comps/loading/loading.ts

Metadata

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
<div class="center" [ngStyle]="_style">
    <div [ngStyle]="_size" class="spinner"></div>
</div>

Inputs

size
src

Type: string

style

Properties

_size
_size: Object
_style
_style: Object
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
        }
    }
}

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""