6 ways to create circular progressBar by using jQuery

image

1. jquery.polartimer.js

image

Polartimer is a circular timer widget supporting basic options and a callback function. The polartimer plugin requires jQuery and the Raphael SVG library.

This project is also on github.

How to use it

Downlaod

2. jQuery Knob

image

Demo and Download

3. CSS3 pie graph timer with jquery

image

Note: Changed to em’s so you just change the font-size in the timer class and everything will resize accordingly.

Demo and downlaod

4. circular progressBar by jQuery andCSS3

image

 

Demo and downlaod

5. ProgressBar.js

141016-0001

Beautiful and responsive progress bars with animated SVG paths. Use built-in shapes or create your own paths.

See demo page for examples.

Demo and download

6. RaphaelPolar Clock

141211-0001

This way is not to using jQuery, it’s using Raphael.

Demo

How to make it 

6 ways to create circular progressBar by using jQuery
26 votes, 4.62 avg. rating (92% score)
  • GuesPostttt

    Cool!

  • tarun

    nice one

  • Atul Patil

    Is it works in IE?

    • http://freenish.com/ Freenish

      They are working on IE9 and above except the last one.

      • Atul Patil

        Is 3rd one working in IE? i
        In 3rd one how i can fill circle with red color when last 5 seconds remain?

        • http://freenish.com/ Freenish

          You can use this website to test IE compatible: http://netrenderer.com/index.php.

          For detail code issue, please ask the project author.

          Thanks.

          • Atul Patil

            Thanks for website .
            How can I ask code related changes to project author.

          • http://freenish.com/ Freenish

            The first three projects have demo or download links, you can find how to contact project authors from those links.

      • Atul Patil

        Thanks for quick replay

  • Atul Patil

    Is 3rd one working in IE? i
    In 3rd one how i can fill circle with red color when last 5 seconds remain?

    • http://freenish.com/ Freenish

      You can use this website to test IE compatible: http://netrenderer.com/index.php.

      For detail code issue, please ask the project author.

      Thanks so much.

  • Kimmo Brunfeldt

    You could also use ProgressBar.js which does not depend on jQuery https://github.com/kimmobrunfeldt/progressbar.js

    • http://freenish.com/ Freenish

      Thanks so much, Kimmo. I’ve added it to post.