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 !
Source: Tips4all, CCNA FINAL EXAM
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.
ReplyDelete$('#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
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.
ReplyDeleteYou 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:
ReplyDelete<div style="">
<div style="background: red; width: 50%"> </div>
</div>
I've done what you're doing for a few of my sites, here's what I did:
ReplyDeleteI 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.
HTML:
ReplyDelete<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;
}
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;
ReplyDeleteWith that, the inner div will advance all the way to the 100% and when passing the rounded area will create a cool effect!