Grow your CSS skills. Land your dream job.

How to create a circular progress bar with jquery ui?

  • # January 22, 2013 at 2:58 pm

    Hello!

    I want to change the jquery ui progress bar to make it work circular.

    I want to have a div in html which takes an amount in percent like 40% and the progress bar start from 0 and fill to 40%

    How can I achieve that?

    # January 22, 2013 at 3:44 pm

    First thing comes to my mind http://widgets.better2web.com/loader/

    # January 22, 2013 at 3:45 pm

    Or the much simpler http://anthonyterrien.com/knob/

    # January 22, 2013 at 3:57 pm

    I want to show you an example of what I want:

    notice that I doin’t whant knob or something like that.

    I want progress bar which fills from 0 to favorite amount automaticly in every page refresh.

    if you see there is progress bars in this page but I want them to work circular:

    http://themes.jozoor.com/crevision/dark/shortcodes.html

    a solid circle which contains the amount in text and a line in outside of that circle which works as progress bar.

    this is exactly what I want:

    http://i48.tinypic.com/2wghu07.jpg

    # January 22, 2013 at 4:15 pm

    The simplest application http://jsfiddle.net/CU7KM/ .
    You can change the value of the input through javascript dynamically to indicate progress.

    # January 22, 2013 at 4:21 pm

    Thanks very much mmoustafa!

    I loved this but it’s not interactive and there is no moving.

    Can you help me to make it moving from 0 to that amount?

    # April 11, 2013 at 11:07 am

    Something like this?[http://p.ar2oor.pl/cprogress/](http://p.ar2oor.pl/cprogress/ “http://p.ar2oor.pl/cprogress/”)

    # October 15, 2013 at 3:25 am

    the url is dead, do you have a live one?

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".