Author: | ToxSickCoder |
---|---|
Views Total: | 11,061 views |
Official Page: | Go to website |
Last Update: | June 28, 2017 |
License: | MIT |
Preview:

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