Question

I’ve been playing around with this page adding CSS3 styles and all.

http://daokun.webs.com/jQuery/Progress.html

The progress bar was offered to me by Makotosan while the idea for a smooth animation using CSS3 by MorrisLiang

I used this website to create a diagonal animation on the bar, the details and color changing. Same thing for the buttons too.

http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar

Now I’m pretty content with this, it came out pretty well but what bothers me is when the bar passes from 0% to anything and viceversa it instantly dissapears. The CSS3 transition applies on the width witch works just fine, but when the bar changes to 0% it doesn’t apply to the width anymore but to the display style. It passes from display:block to display:none witch makes it instantly vanish. Is there anyway to make that bit smoothly arrive to 0% or I’ll just have to live with the bar going empty instantly?

Another thing, from the website above showing the progress bar, I’d like to have on the bar a text showing it’s current %. Not in the middle, as in the website following the value bar and having smooth changing of the value.

This is the CSS page if needed: http://daokun.webs.com/jQuery/myUi.custom.css

As for the HTML View Source should be enougt.

Answer 1

The bit, in your source, which says:

progress.progressbar('value', progress.progressbar('value') - 5);

Change to:

if(progress.progressbar('value') == 5) {
    progress.animate({width: '0%'}, 200);
} else {
    progress.progressbar('value', progress.progressbar('value') - 5);
}

And the other bit:

progress.progressbar('value', progress.progressbar('value') + 5);

Should be changed to:

if(progress.progressbar('value') == 0) {
    progress.animate({width: '5%'}, 200);
} else {
    progress.progressbar('value', progress.progressbar('value') + 5);
}

For the changing value you’d want to use a self-executing function using setTimeout (not setInterval as this does not wait for one call to the function to finish before the next one). This function would set the value of the span to the current width of the progress bar – not the progressbar value as I believe, even if it is in between two values width-wise, it would only return the value you last set it to (i.e. a multiple of 5).

You’d also want to set the value of the progressbar in the callback of the animate functions above, but note that when animating from 0 to 5 you’d want to set progress.find(".ui-progressbar-value").css({display: "block"}). I can’t give you all the answers so I will leave you to figure out where to modify it.