Это действительно интересно на самом деле. Вот ваш индикатор прогресса. Отлично работает в IE5.5 + и Safari 5 (браузеры, которые я тестировал).
Использует системные цвета. : D
Визуализация здесь
<!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>
Обратите внимание, что я использовал setAttribute, чтобы присвоить значение индикатору выполнения с помощью имени пользовательского атрибута.
Модификация скрипта для реального прогресса
Приведенный выше пример является просто фиктивной шкалой прогресса, поскольку для увеличения значения используется таймер. Чтобы добиться реального прогресса, вам нужно немного изменить скрипт. Вы можете изменить функцию progress так, чтобы она добавляла значение к текущему значению, или вы можете сделать это так, чтобы она установила значение. Второй подход, вероятно, то, что вы хотите использовать.
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 + '%';
}
Вы можете пропустить value = value > 100 ? 100 : value < 0 ? 0 : value, если убедитесь, что значение, переданное функции, находится в диапазоне от 0 до 100.
Проверьте это здесь
Edit:
Я изменил innerText на innerHTML, чтобы он работал в Firefox. Я не знал об этом. Я также изменил в CSS display:inline-block на display:block. Я знаю, что таким образом вы не можете больше использовать индикатор выполнения, но это заставляет его работать в Netscape 9.