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

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 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

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.

Answer 5

HTML:

<div class="progress"><div style="width:30%"></div></div>

CSS:

    .progress {
    width: 300px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.progress div {
    background: url(background.png);
    height: 10px;
    -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
}

Answer 6

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 7

I'm a bit confused on what you want to do regarding the rounded corners on the filled color! But if it's supposed to be advancing straight, not rounded, just set the wrapper div with css overflow:hidden;

With that, the inner div will advance all the way to the 100% and when passing the rounded area will create a cool effect!