ToxProgress

Click here for the live version

Introduction

This library was made to easily create animated radial progress bars.

The goal of these animated radial progress bars is to add a stylized way to show numbers/statistics on your website.

How to use

The way to include a ToxProgressBar to your website is to link the tox-progress.js and tox-progress.css files on your web page. You can then add a ToxProgressBar by using this tag:

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

The div needs to have the class="tox-progress". This makes the div visible to the library. There also are a few properties we can see:

• Size: The diameter of the radial progress bar circle.
• Thickness: This is the thickness of the radial progress bar.
• Color: The foreground color. This is the color the radial progress bar will be.
• Background: The background color. This should to be the same color as your website. You can also use another color to create some interesting effects
• Progress: A number from 0-100 which marks the progress of the radial progress bar.
• Speed: The speed in ms in which the animation would do a full circle.

There is also the possibility to add content inside the radial progress bar. Add this div inside the class="tox-progress" div:

<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">
         //Add content here
     </div>
 </div>

So first add the class="tox-progress-content" to the div. If you want this content vertically centered add the data-vcenter="true" property. You can add any content you want in here.

Then include the following code on your website:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        ToxProgress.create();
        ToxProgress.animate();
    });
</script>

The ToxProgress.create(); function generates everything needed. It has to be called before the ToxProgress.animate(); function. The ToxProgress.animate(); function can be called whenever you want.

If you want to reset the animation, call ToxProgress.create(); before you call ToxProgress.animate(); again.