Here I have used ProgressBar.js to create semicircle progress element.
Download the required file from this link - https://kimmobrunfeldt.github.io/progressbar.js/
1. Add the progressbar.min.js file to your head section of html file.
<script src="progressbar.min.js"></script>
2. Put the following code in body section in html
<div id="halfcircle">
</div>
3. Then put the below JavaScript code in body section of your html project file -
<script>
var a = 65.
var out = a / 100.
var bar = new ProgressBar.SemiCircle(halfcircle, {
strokeWidth: 6,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
svgStyle: null,
text: {
value: '',
alignToBottom: false
},
from: {
color: '#FFEA82'
},
to: {
color: '#ED6A5A'
},
// Set default step function for all animate calls
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
var value = Math.round(bar.value() * 100);
if (value === 0) {
bar.setText('');
} else {
bar.setText(value);
}
bar.text.style.color = state.color;
}
});
bar.text.style.fontSize = '1.5rem';
bar.animate(out); // Number from 0.0 to 1.0
</script>
4. Then add this CSS property to your CSS file -
#halfcircle {
margin: 20px;
width: 200px;
height: 100px;
}
Try this code in your computer for better understanding. Enjoy the code. If you have any Question you can contact us or mail us. We will reply you as soon as possible.
Post a Comment