Animated Radial Progress Bar In JavaScript – ToxProgress.js

Category: Javascript , Loading | June 28, 2017
Author: ToxSickCoder
Views Total: 2,346
Official Page: Go to website
Last Update: June 28, 2017
License: MIT

Preview:

Animated Radial Progress Bar In JavaScript – ToxProgress.js

Description:

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.

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();

Leave a Reply