angular2 封装progressbar

效果：

<div class="loadingbar">
    <div>
        <span>数据加载中...{{value}}%</span>
        <ngb-progressbar value="{{value}}"></ngb-progressbar>
    </div>
</div>

import {Component,OnInit,Input} from "@angular/core";
import {NgbProgressbarConfig} from "@ng-bootstrap/ng-bootstrap";


const css = require('./progressbar-loading.component.css');
@Component({
    selector: 'custom-progressbar-loading',templateUrl: './progressbar-loading.component.html',styles: [
        css
    ]
})

export class ProgressbarLoadingComponent implements OnInit {

    @Input() value = 0;
    @Input() msTime = 10;

    constructor(config: NgbProgressbarConfig) {
        config.max = 100;
        config.striped = true;
        config.animated = true;
        config.type = 'success';
    }

    ngOnInit() {
        setInterval(() => this.dynamicChange(),this.msTime);
    }

    dynamicChange() {
        this.value += 1;
        if (this.value > 100) this.value = 100;
    }
}

/*.loadingbar {*/
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background: rgba(0,0.6);*/
    /*z-index: 999;*/
/*}*/

.loadingbar > div {
    width: 400px;
    position: absolute;
    top: 40%;
    left: 40%;
    font-size: 1.3rem;
    font-family: "Microsoft YaHei";
}

（编辑：李大同）

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