angular2 封装Loading

<div id="loading">
    <span>{{ loading }}   <i class="fa fa-spinner fa-pulse fa-2x fa-fw" style="color: whitesmoke"></i></span>
</div>

import {Component,Input} from "@angular/core";
const loadcss = require('./loading1.component.css');
@Component({
    selector: 'loading1',templateUrl: './loading1.component.html',styles: [
        loadcss
    ]
})

export class Loading1Component {
    
    @Input() loading: string = 'Loading...';

}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0.7);
    z-index: 999;
}

#loading span {
    position: absolute;
    top: 50%;
    left: 40%;
    font-size: 2rem;
    margin-top: -15px;
    margin-left: -15px;
    color: whitesmoke;
}

效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!