angular2 封装Loading

最新推荐文章于 2020-08-06 14:12:18 发布

chixian4839

最新推荐文章于 2020-08-06 14:12:18 发布

阅读量286

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2499632/blog/768457

版权

<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, 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;
}

效果：

转载于:https://my.oschina.net/u/2499632/blog/768457