Grow your CSS skills. Land your dream job.

How to change this circular progress bar?

  • # January 26, 2013 at 5:33 am

    Hello!
    I have created a circular progress bar in here:
    http://codepen.io/anon/pen/Iyhpb
    now, I want it to take an amount in percentages like 10%, 25%, 65% and … and start from 0 and end in that amount not in 100%.
    How should I do that?

    Thank you in advance!

    Alireza.M

    # February 2, 2013 at 6:15 pm

    I think there will be a way to doing this.

    please, help me!

    # February 2, 2013 at 8:14 pm

    http://codepen.io/anon/pen/EjFgJ

    # February 2, 2013 at 8:50 pm

    Or you could just change your opening if statement in your function . . .

    timer = setInterval(function () {
    if (i > 85) {

    Tada! :)

    Edit: Or, if you need that percentage to be more user-accessible, you could plug it into the HTML through a data attribute, grab it as a variable, and voila. Like so: http://codepen.io/JoshBlackwood/pen/cqDib

    # February 3, 2013 at 2:23 pm

    Really thanks dear JoshBlackwood!!!

    Finally I achieved what I want.

    Now I’m easily using it but if I want to show multiple progresses in a page one of them will work but the others not.

    How can I make them working in one page?

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

You must be logged in to reply to this topic.

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