Animated Radial Progress Bar In JavaScript – ToxProgress.js

ToxProgress.js is a lightweight JavaScript library which makes use of plain HTML/CSS to create animated circular (radial) progress bars with several useful customization options.

See also:

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

How to use it:

Load the JavaScript ‘ToxProgress.js’ and CSS ‘ToxProgress.css’ in the html file.

<link href="css/tox-progress.css" rel="stylesheet">
<script src="js/tox-progress.js"></script>

Create the html structure and config the radial progress bar using ‘data’ attributes as these:

• data-size=”180″: circle size
• data-thickness=”12″: thickness
• data-color=”#229922″: circle color
• data-background=”#ffffff”: background color
• data-progress=”25″: percentage
• data-speed=”500″: animation speed

<div class="tox-progress" 
     data-size="180" 
     data-thickness="12" 
     data-color="#229922"
     data-background="#ffffff" 
     data-progress="25" 
     data-speed="500">
    <div class="tox-progress-content" 
          data-vcenter="true">
      Progress content here
    </div>
</div>

Initialize the radial progress bar.

ToxProgress.create();

Animate the radial progress bar.

ToxProgress.animate();