angular2 封装progressbar

最新推荐文章于 2020-07-29 18:20:02 发布

chixian4839

最新推荐文章于 2020-07-29 18:20:02 发布

阅读量241

点赞数

文章标签： javascript ViewUI

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

版权

效果：

<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, 0, 0.6);*/
    /*z-index: 999;*/
/*}*/

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

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