Skip to content
This repository has been archived by the owner. It is now read-only.
This JavaScript library was made to easily create animated radial progress bars.
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
css
img
js
.gitattributes
.gitignore
LICENSE
README.md
index.html

README.md

ToxProgress

test

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.

You can’t perform that action at this time.