ionic 圆形进度条

1.安装

npm install progressbar.js

2.html页面

3.ts页面上

import * as ProgressBar from "progressbar.js";

ngAfterViewChecked() {

let items = document.getElementsByClassName("con_pro");

for (let i = 0; i < items.length; i++) {

let a = items[i].getAttribute("id");

let b = document.getElementById(a);

if (b.innerHTML.trim().length == 0) {

this.doline(a, 50);

}

}

}

doline(id, stopval) {

let circle = new ProgressBar.Circle("#" + id, {

color: "red",

duration: 3000,

easing: "easeInOut",

from: { color: "#aaa", width: 10 },

to: { color: "#333", width: 10 },

strokeWidth: 10,

trailWidth: 10,

step: function(to, circle) {

let value = Math.round(circle.value() * 100);

circle.setText(value + "%");

if (value >= stopval) {

circle.stop();

}

}

});

circle.animate(1);

}