jQuery Forum

Thanks for your really fast answer.

Actually I don't know such coding but I could change it to achieve mine if I had it.

If you can give me some code or what is needed to play with it and create what I want.

Thank you very much!

Sorry, i don't have anything remotely close to what you would need (though it wouldn't really be very much code at all).

OK, I'll try my best to do that.

But first I have a question:

Should I touch jquery-ui or no I can achieve this with creating css codes?

You can almost achieve it with just css, the issue is the bar width% needs to be instead setting the background position of the spritegraphic. You could do it by simply using the progressbar plugin and using your own styles, and binding to the event that gets triggered when the progressbar is updated, and on that event set the background position of the sprite based on the current % complete.

I'll do this way but there is one problem.

I have another version of progress bars in my template which is created with jquery-ui too.

I have used .progress-bar class for that which is default class for progress bars and I think I should use another class for this (circular one) for example : .circular-progress

 and the question is where should I put this class first and then style it in css file?

wrap your progressbar in a div with an id, then style based off of that id.

Basically just make an image with several different states for the circle loading bar (10%, 20%, 30% etc.), and make something like this:

Very nice answer.

I wish you could give me the code. Because I really don't know how to use it as progress.

Please , if you can give me the code of a for example 50% circular progress bar for one of circles you showed me in previous comment.

Thanks again!

You're being way too lazy. Have you at least created the progress image?

Hello!

I created the circles spritesheet and used exactly the code which you gave me and also implemented jquery ui script.

It looks like what I want but there is no any difference between different percentages.

I mean I can't see 10%, 20% and ... circles and it only shows 0%.

I really don't know how to change the code to make it working.

Please help me!

Did you notice this?

Thank you veru much dear jurchicks!

The only step to achieve what is in my mind is make it working with an amount.

now what I type inside <div id="progress_percentage"></div> it will start from 0 to 100 but I want it take an amount like 40%, 65% and ... and start from 0 and end in that amount not in 100%.

thank you again.

I really apperciate your work!

Really really thanks you dear jurchiks!!!

Finally I achieved what I want.

Now, I want to add (document).ready to it because I should put script's code after html codes and I want to put it's code inside head tags and when I call it, it works.

Also I want to have multiple progresses inside a page, now if I put for example 3 progresses (circular) the first one will work but the others not.

How can I do these?