jQuery SVG Circular Progress Bar Plugin ProgressCircle
Add-ons
Plugin description: ProgressCircle.js is a jQuery circular progress bar plugin based on SVG. This jQuery circular progress bar plugin creates attractive circular progress animations by dynamically generating SVG elements and using CSS3 animations.
Usage
Include progresscircle.css, jQuery, and progresscircle.js in your page.
1 2 3 | <link href="css/progresscircle.css" rel="stylesheet"> <scriptt src="jquery.min.js"></scriptt> <scriptt src="progresscircle.js"></scriptt> |
The basic HTML structure of this jQuery circular progress bar is as follows:
1 2 | <div class="circlechart" data-percentage="-20"> -20% </div><div class="circlechart" data-percentage="50"> 50% </div> |
The data-percentage attribute specifies the percentage of the circular progress bar. It can also be a negative number, which indicates that the animation runs in the reverse direction.
评论