Progress Bar cez JavaScript a CSS

Progress Bar slúži na vyjadrenie aktuálneho stavu určitej činnosti. Stretávame sa s ním denne, či už pri kopírovaní súborov, inštalácií aplikácií alebo na internete. Je možné ho vytvoriť za pomoci krátkeho JavaScript a CSS kódu. Všetko funguje na veľmi jednoduchom princípe s funkciou setTimeout() a 3 elementmi <div>. Vlastná funkcia stats() má 3 parametre. Prvý určuje odkiaľ sa má začať zobrazovať stav, druhý určuje pokiaľ sa má zobrazovať a posledný nastaví čas, za ktorý sa všetko toto udeje. Ďalšou a zároveň poslednou funkciou je process(). Volá sa len cez funkciu setTimeout() a nastavuje šírku elementu <div>. Výsledok si môžete prezrieť tu, stiahnúť tu a zdrojový kód nájdete po otvorení celého článku.

JavaScript

function status(sb_start,sb_end,seconds)
{
	var speed = Math.round(seconds*10);
	var timer = 0;
	for(i = sb_start; i <= sb_end; i++)
	{
		setTimeout("process('" + i + "')",(timer*speed));
		timer++;
	}
}

function process(status)
{
	var progress = document.getElementById('status');
	progress.innerHTML = status + '%';

	var bar = document.getElementById('bar');
	bar.style.width = status + '%';

	if(status == 100) progress.innerHTML = 'Completed';
}

status(0,100,10);

CSS

* { margin:0; padding:0; }
html, body { font-family:'Tahoma','Lucida Grande CE',lucida,sans-serif; font-size:12px; padding:10px; }

div.statusbar { width:300px; height:25px; border:1px outset silver; background:url('bar-empty.png') repeat-x; position:relative; }
div.statusbar div#status { width:300px; height:25px; color:black; font-weight:bold; top:0; left:0; position:absolute; text-align:center; padding:6px; }
div.statusbar div#bar    { width:0%; height:100%; background:url('bar.png') repeat-x; text-align:center; }

XHTML

<div class='statusbar'>
<div id='bar'></div>
<div id='status'>0%</div>
</div>