Progress Bar cez JavaScript a CSS

Progress Bar cez JavaScript a CSS

Progress Bar 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>
Alternatívne verzie: Text PDF Voice
Autor: PaBi3 · Kategória: Programovanie · Dátum: 01.03.2007 23:41

Komentáre

#1 piler
02.03.2007 09:05
A ako je to s tym casom, za ktory sa to ma vsetko udiat??? Napr. upload suborov na net, ako vies zistit, za aky cas sa to vsetko udeje? Riesil si nieco take?

#2 OndroNR Web
02.03.2007 15:29
stym uploadom suborov je to takto: v pripade PHP je potrebny jednoduchy patch a rozsirenie. mam k dispozici zdrojaky pre PHP 4.3.10 a 5.0.3. potom sa to uz da myslim ze cez AJAX. v perli to myslim ide bez patchu. skript mam tiez

#3 admin Web E-mail
02.03.2007 15:41
admin [1] piler, ja by som to riešil tak, že by som si zistil veľkosť súboru a potom by som v progess bare ukazoval počet prenesených dát. Cez samotný JavaScript upload samozrejme nefunguje. Potrebuješ nejaký skript na strane serveru.

#4 hijacker Web E-mail
06.04.2007 16:59
Does this really do the trick? Can javascript really tell how much of a file has been already uploaded to the remote server?

Please, any responses should be in English.

#5 Radoslav Web E-mail
18.05.2007 18:20
[4] hijacker, you need a server scripted side script, only JS that cant make ;)

#6 jakubos Web E-mail
01.12.2008 15:39
ako sa to da prepojit s uploadom?

Osobné údaje
Captcha
Odpíšte text z obrázku. Rozlišujú sa malé a veľké písmená.
Obsah
Možnosti