The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to create a circular progress bar with jquery ui?

  • # January 22, 2013 at 2:58 pm


    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

    # January 22, 2013 at 3:45 pm

    Or the much simpler

    # 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:

    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:

    # January 22, 2013 at 4:15 pm

    The simplest application .
    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?[]( “”)

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed