To refine the conclusion of the figures in the progress of the bar
-
There's progress in the bar.
let circle = nullfunction refreshCircle(percentage) {
if (!circle) {
circle = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 5000,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);const value = Math.round(circle.value() * 100); if (value >= 0 && value <= 20) { circle.setText('some text'); } if (value >= 21 && value <= 40) { circle.setText('some1 text'); } if (value >= 41 && value <= 60) { circle.setText('some2 text'); } if (value >= 61 && value <= 100) { circle.setText('some3 text'); } } }); circle.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; circle.text.style.fontSize = '2rem';}
circle.animate(percentage);
}refreshCircle(0.3)
setTimeout(() => refreshCircle(0.1), 5000)#container {
margin: 20px;
width: 200px;
height: 200px;
position: relative;
}<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>It is necessary that the text that is now under it and that within the progress of the bar (where the text is now) the loading percentages can be realized?
-
let circle = null const text = document.querySelector('.text');function refreshCircle(percentage) {
if (!circle) {
circle = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 5000,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);const value = Math.round(circle.value() * 100); if (value >= 0 && value <= 20) { circle.setText(value); text.innerHTML='some text'; } if (value >= 21 && value <= 40) { circle.setText(value); text.innerHTML='some1 text'; } if (value >= 41 && value <= 60) { circle.setText(value); text.innerHTML='some2 text'; } if (value >= 61 && value <= 100) { circle.setText(value); text.innerHTML='some3 text'; } } }); circle.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; circle.text.style.fontSize = '2rem';}
circle.animate(percentage);
}refreshCircle(0.3)
setTimeout(() => refreshCircle(0.1), 5000)#container {
position: relative;
width: 200px;
height: 200px;
}
.wrapper{
width: 200px;
height: 200px;
text-align:center;
}<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div class="wrapper">
<div id="container"></div>
<div class="text">Some text</div>
</div>
