Home » Html » How to create circular progress(pie chart) like indicator

How to create circular progress(pie chart) like indicator

Posted by: admin November 29, 2017 Leave a comment


I have to show progress graphs exactly in following way where percentage would be in center of circular graph
circular progress indicator

How can i do this using javascript/jQuery?
Can it be done using Google Chart?


There’s a plugin for this at:


jQuery Knob

  • canvas based ; no png or jpg sprites.
  • touch, mouse and mousewheel, keyboard events implemented.
  • downward compatible ; overloads an input element…

I searched and know there are at least 5 ways to create Circular progress indicator:
They include:

  1. jquery.polartimer.js
  2. jQuery Knob
  3. CSS3 pie graph timer with jquery
  4. circular progressBar by jQuery andCSS3
  5. ProgressBar.js

pls see: http://freenish.com/4-ways-to-create-circular-progressbar-by-using-jquery/


I would recommend Highcharts JS for all of your JavaScript graphing needs

Browse through more of the demos; I think you’re looking for the Donut Chart 🙂


You can use CSS sprites (google) for this purpose, if you want to show multiples of 10 (0%, 10%, 20% etc). I guess you need to be a graphics guru to create the sprite..

The sprite is one image containing more than one image. For your purpose, you can create an image, say 16x160px. Imagine that this image is divided into ten 16x16px “slices” and draw the corresponding percentage on that slice. You can then use CSS and JavaScript to show one “frame” from this sprite.


I don’t think you can do it with javascript/jquery/css alone. You need to render different images, for each step one and display the proper one.
It could be made with flash (probably there are ready made components) or with svg or html5 canvas element or an api which uses one of the above backends.