jQuery Plugin For SVG Progress Circle - ProgressCircle

File Size: 3.42 KB
Views Total: 19304
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For SVG Progress Circle - ProgressCircle

ProgressCircle is a lightweight jQuery plugin used to render animated, dynamic circular progress indicators using SVG and CSS.

How to use it:

1. Include the progresscircle.css on the web page.

  • The 'reverse' animation direction plays the animation backwards which makes it start at the stroke offset 100 which means displaying no stroke at all and animating it to the value defined in the SVG via the inline `stroke-dashoffset` attribute.
  • Rotate by -90 degree to make the starting point of the stroke the top of the circle.
  • Using CSS transforms on SVG elements is not supported by Internet Explorer and Edge, use the transform attribute directly on the SVG element as a workaround.
<link rel="stylesheet" href="progresscircle.css">

2. Create a DIV container for the progress circle and define the percentage value in the data-percentage attribute. Negative numbers are supported as well.

<div class="circlechart" 
     data-percentage="-20">
     -20%
</div>

<div class="circlechart" 
     data-percentage="50">
     50%
</div>

3. Include the latest jQuery library (slim build) and the JavaScript file progresscircle.js at the bottom of the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="progresscircle.js"></script>

4. Render the progress circles on the page.

$(function(){

  $('.circlechart').circlechart();

});

This awesome jQuery plugin is developed by killia15. For more Advanced Usages, please check the demo page or visit the official website.