Progress Bar Filling - jQuery Implementation

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

A simple option is use a background colour, make sure the outer container width is fixed and then just set the inner div's width to a percentage that's the same as the progress.

Answer 2

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

Answer 3

You could use one div and an image, as I mentioned earlier in a comment. Here's a way you could do it. (Not completely tested, so it may break.)

HTML:

<div id="progressBar"></div>

CSS:

 #progressBar {
   width: 200px;
   height: 20px;
   background: url('http://o.imm.io/x9E.jpg') no-repeat;
   background-position: -200px 0px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

JS:

function setProgress(target,value) {
  
  var oldPosition = $(target).css("backgroundPosition");

  // Log the old position 
  console.log("Old position: " + oldPosition);
  var newPosition = parseInt(oldPosition) + parseInt(value);

  // Log the new position
  console.log("New position: " + newPosition);
  $(target).animate({backgroundPosition: newPosition + 'px 0px'})
}

Edit: I added the rounded corners and it works exactly as you specified, no issues with the rounded corners.

Edit 2: Check out the JSBin version of this code.

Edit 3: As the OP said, they needed the progress bar to be flexibly sized. This implementation won't do that. I'm going to recommend (as I have earlier) the use of the jQueryUI Progress Bar. It's easy to use, and fairly lightweight.

Edit 4: I've come up with another implementation of this, which requires a bit more Javascript, but you can test it out here: http://jsfiddle.net/ntnz4/7/

Answer 4

You can use 2 divs, one inside the other, put the background on the inner one and set it's width with a %, something like this:

<div style="">
    <div style="background: red; width: 50%">&nbsp;</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 5

I've done what you're doing for a few of my sites, here's what I did:

I first did some basic markup:

<div id="progressBar">
    <div id="progressBarInner"></div>
</div>

And the CSS:

#progressBar {
    width: 200px;
    height: 20px;
}

#progressBarInner {
    background: url('path/to/your/progress/image.jpg');
    width: 100%;
    height: 100%;
}

When this is done, setting the progress is actually really simple. Whatever progress you want to be displayed in the progress bar, you set to the width of the #ProgressBarInner element. For example, if you wanted to show 32%, you'd set this:

width: 32%

for the progressBarInner div.

I don't know how to do this using jQuery off the top of my head, but I do know for a fact you can set CSS properties using it, so this is entirely possible.