Toxprogress Library was made to create the animated radial progress bars. The goal of these radiological bars is to add a flowing way to show numbers/statistics on your website.
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: diameter of the radial progress bar circle.
- Thickness: This is the thickness of the radial progress bar.
- Color: front color. This is the color that will be the radial progress bar.
- Background: the background color. This should be the same color as your website. You can also use another color to create some interesting effects.
- Progress: No. 0-100 represents the progress of the radial progress bar.
- Speed: speed in MS in which the animation will make a full circle.
How to make use of it:
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>
2. Create an HTML structure and configure the radial progress bar.
<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>
3. Create a radial progress bar.
4. Move the radial progress bar.
Animated Radial Progress Bar, ToxProgress Plugin/Github
See Demo And Download
Official Website(FreekMencke): Click Here