Represent Percentage In A SVG Circle – Circular Progress Bar

Preview:

Description:

Yet another radial progress bar plugin to display a percentage value as an animated SVG circle.

See Also:

• Top 10 JavaScript & CSS Progress Bar Components
• 10 Best Circular/Radial Progress Bar JavaScript Plugins

How to use it:

Download and place the JavaScript progress.js in the html document.

<script src="progress.js"></script>

Create a new circular progress bar.

const pb = new Progress()

Append the circular progress bar to the body.

const elm = pb.getElement();
document.body.appendChild(elm);

Set the percentage value.

pb.setValue(50);