Question

I’m implementing my own Progress Bar using jQuery.
My question is how can I fill (for example) only 30% of it with a background ?
What are my options ?
Basically, the Progress Bar is a simple div with rounded corners (-moz-border-radius).
I’m using Firefox 3.6.3.

[Update]
I tried this example.
How to force the right side of the filled area not to be rounded like in the third example ? The fourth example is problematic though… How would you solve this ?

Thanks !

Answer 1

Don’t know what you are using to animate the progress bar, but if you can change the radius as it approaches the end you can get a smooth transition.

$('#inner4')
    .css('width',25)
    .css('-moz-border-radius-topright','0')
    .css('-moz-border-radius-bottomright','0')
    .animate(
      {
        width:425
      },
      3000, 'linear',
      function() {
          $('#inner4').animate({
            width:450,
            '-moz-border-radius-bottomright':'+=25',
            '-moz-border-radius-topright':'+=25'
          },
          200,'linear',
          function() {}
        );//end inner animate
      }
    );//end animate

Here’s an example