The article Progress Bar cez JavaScript a CSS is written by PaBi3
Progress Bar sluzi na vyjadrenie aktualneho stavu urcitej cinnosti. Stretavame sa s nim denne, ci uz pri kopirovani suborov, instalacii aplikacii alebo na internete. Je mozne ho vytvorit za pomoci kratkeho JavaScript a CSS kodu. Vsetko funguje na velmi jednoduchom principe s funkciou setTimeout() a 3 elementmi <div>. Vlastna funkcia stats() ma 3 parametre. Prvy urcuje odkial sa ma zacat zobrazovat stav, druhy urcuje pokial sa ma zobrazovat a posledny nastavi cas, za ktory sa vsetko toto udeje. Dalsou a zaroven poslednou funkciou je process(). Vola sa len cez funkciu setTimeout() a nastavuje sirku elementu <div>. Vysledok si mozete prezriet tu, stiahnut tu a zdrojovy kod najdete po otvoreni celeho clanku.
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>
Progress Bar cez JavaScript a CSS Návrat

Progress Bar cez JavaScript a CSS