This is quite intriguing, actually. Take a look at this progress bar. It functions smoothly in IE5.5+ and Safari 5 (the browsers I tested).
Makes use of system colors. :D
Click here for visualization
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progress</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.progressbar, .progressbar strong {
display:block;
height:1.2em
}
.progressbar, .progressbar em {
width:10em
}
.progressbar strong, .progressbar em {
position:absolute;
top:0;
left:0
}
.progressbar {
font:status-bar;
color:windowtext;
background:window;
border:1px solid windowframe;
text-align:center;
position:relative
}
.progressbar strong {
background:highlight;
width:0;
font-weight:normal;
overflow:hidden
}
.progressbar em {
color:highlighttext;
font-style:normal
}
</style>
<script type="text/javascript">
function progress(bar) {
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
var value = parseInt(bar.getAttribute('progress'), 10);
value += 1;
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
bar.setAttribute('progress', value);
if (value < 100)
setTimeout(function() { progress(bar) }, 20);
}
window.onload = function() {
var span = document.getElementsByTagName('span');
for (var i = 0; i < span.length; i++) {
if (span[i].className == 'progressbar') {
span[i].setAttribute('progress', 0);
var el1 = document.createElement('span');
el1.innerHTML = '0%';
span[i].appendChild(el1);
el1 = document.createElement('strong');
var el2 = document.createElement('em');
el2.innerHTML = '0%';
el1.appendChild(el2);
span[i].appendChild(el1);
progress(span[i]);
}
}
}
</script>
</head>
<body>
<p><span class="progressbar"></span></p>
</body>
</html>
Keep in mind that I utilized setAttribute to set the value for the progress bar using a custom attribute name.
Adjusting the script for actual progress
The example above is just a mock progress bar as it utilizes a timer to increment the value. To achieve real progression, you'll need to tweak the script slightly. You can modify the progress function so that it adds the value to the current one, or you can have it set the value. The latter approach is likely what you'd want to go with.
function add(bar, value) {
bar = document.getElementById(bar);
value = parseInt(bar.getAttribute('progress'), 10) + value;
value = value > 100 ? 100 : value < 0 ? 0 : value;
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
bar.setAttribute('progress', value);
}
function set(bar, value) {
value = value > 100 ? 100 : value < 0 ? 0 : value;
bar = document.getElementById(bar);
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
}
You can omit
value = value > 100 ? 100 : value < 0 ? 0 : value
if you ensure that the value passed to the function falls between 0 and 100.
Test it out here
Edit:
I switched from using innerText to innerHTML to ensure compatibility with Firefox. This was new information for me. Additionally, in the CSS, I changed from display:inline-block to display:block. While this means the progress bar can no longer be inline, it now works in Netscape 9.