How can i make a bar that fills up. Where i give it two numbers say 50/100 that would mean that there is an outline box with 100 px in length and 50 pixels are filled.

I need it so that on any page i can just say
<progressbox 50 | 100> something like that.

<div style="width: 100px; background-color: #FFFFFF; color: inherit;">
<div style="width: 50px; background-color: #00AA00; color: inherit;">
</div>
</div>

you can't make a "progress bar" with CSS only (well not one you can animate anyway)

So a bit of DHTML playing gets this

function progressBar(iWidth,iHeight,iDone) {
if (iWidth != 0) {
	document.getElementById("progress").style.width = iWidth +"px";
	} else {
	document.getElementById("progress").style.width = 200 +"px";
	}
if (iHeight != 0) {
	document.getElementById("progress").style.height = iHeight +"px";
	document.getElementById("progress_done").style.height = iHeight +"px";
	document.getElementById("progress_todo").style.height = iHeight +"px";
	} else {
	document.getElementById("progress").style.height = 20 +"px";
	document.getElementById("progress_done").style.height = 20 +"px";
	document.getElementById("progress_todo").style.height = 20 +"px";
	}
	document.getElementById("progress_done").innerHTML = iDone +"%";
	document.getElementById("progress_done").style.backgroundColor = "green";
	document.getElementById("progress_done").style.width = iDone +"%";
	document.getElementById("progress_todo").style.backgroundColor = "yellow";
	document.getElementById("progress_todo").style.width = (100 - iDone) +"%";
if (iDone != 100) {	
	document.getElementById("progress_todo").innerHTML = " "	
	}
}

function use is progressBar(width,height,amount-done)

Demo code:

<a href="javascript:progressBar(500,50,50)">50% Progress</a>
<br>
<a href="javascript:progressBar(0,0,25)">25% Progress</a>
<br>
<a href="javascript:progressBar(0,0,30)">30% Progress</a>
<br>
<a href="javascript:progressBar(0,0,75)">75% Progress</a>
<br>
<a href="javascript:progressBar(0,0,80)">80% Progress</a>
<br>
<a href="javascript:progressBar(0,0,100)">100% Progress</a>
<br>
<div id="progress"><div id="progress_done"></div><div id="progress_todo"></div></div>