У Лугавчика

В связи с активным развитием AJAX, зачастую начинает появляться проблема длительности загрузки данных, при каких-нибудь работах на стороне сервера. Для этих целей был созданклас отображающий полосу прогресса у пользователя в браузере.

function ProgressBar(){
	this.value	= 0;
	this.max	= 1;
	this.parent	= null;
	this.main	= null;
	this.progress	= null;
	this.info	= null;
}

ProgressBar.prototype.Create= function (element,maximum){
	this.value	=0;
	this.max	=maximum;
	this.parent	=element;
	this.main	=appendElement(element,'div',{'className':'progressbar'});
	this.progress	=appendElement(this.main,'div',{'className':'progress','innerHTML':' '});
	this.info	=appendElement(this.main,'div',{'className':'percent'});
	this.Progress(0);
}

ProgressBar.prototype.Progress= function (value){
	this.value	=value;
	this.Repaint();
}

ProgressBar.prototype.Repaint=function(){
	var percent	=this.value/this.max*100;
	this.progress.style.width	=percent+'%';
	this.info.innerHTML	=Math.round(percent*10)/10+'%';
}

ProgressBar.prototype.NewMax= function (value){
	this.max	=value;
	this.Repaint();
}

ProgressBar.prototype.Destroy= function (){
	this.parent.removeChild(this.main);
}
 

Особенностью этой полоски является то, что она создаётся в обекте передаваемом в функцию Create.

Всё оформление задаётся через описания к классу полоски, что позволяет не грузить скрипт ненужными параметрами. Для создания полоски используется функция описанная в записи создание HTML элемента в javaScript одной функцией.