angular2 封装progressbar

效果：

数据加载中...{{value}}%

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！