Прогресс бар на JavaScript

Данный скрипт реализует анимационный "бегунок", имитирующий индикатор загрузки. Скорость анимации, цвет, размеры и другие параметры "бегунка" можно задавать в скрипте. Использовать "бегунок" можно в любом месте документа, вызвав его функцией Load_run().

Создаем функцию и основные элементы "бегунка":

function Load_run() {

	var body = document.getElementsByTagName('body')[0];
	var divC = document.createElement('div');
	var divR = document.createElement('div'); // ползунок
	var divRC = document.createElement('div'); // ползунок
	var pText = document.createElement('p'); // текст
	var prNum = 0;
	divC.appendChild(divR);
	divC.appendChild(divRC);
	divC.appendChild(pText);
	pText.innerHTML = "...";
	body.appendChild(divC);

Создаем функцию для анимации бегунка:

	var a = setInterval (function() {

	divRC.style.backgroundColor = '#F08080';
	prNum+= 6; // в prNum+=  в значение можно подставить любое целое число больше нуля
	pText.innerHTML = "Идет загрузка: "+prNum+" %";
	divRC.style.width = prNum+"px";

		if (prNum >=  100 ) {
			pText.innerHTML = "Загрузка завершена";
			divRC.style.width = 100+"px";
			clearInterval(a);
		}
	},500); // где 500 - это скорость анимации, можно увеличивать или уменьшать

Добавляем CSS стили к созданным элементам и вызываем функцию:

	divC.style.border = 'dotted'; // стиль границы
	divC.style.backgroundColor = "#F5F5F5"; // цвет фона
	divC.style.borderColor = '#E6E6FA'; // цвет рамки
	divC.style.position = 'absolute'; // позиционирование в документе
	divC.style.width = 320; // ширина
	divC.style.height = 75; // высота
	divC.style.marginTop = 20; // отступ сверху

	divR.style.borderRadius = 5; // округление рамки
	divR.style.width = 99; // ширина
	divR.style.height = 10; // высота
	divR.style.backgroundColor = '#FFF0F5'; // цвет фона бегунка
	divR.style.borderRadius = 5; // округление рамки
	divR.style.border = "groove"; // стиль рамки
	divR.style.marginTop = 20; // отступ сверху
	divR.style.position = 'fixed';
	divR.style.marginLeft = 20; // отступ слева

	divRC.style.borderRadius = 4; // округление рамки
	divRC.style.zIndex = 999;
	divRC.style.marginTop = 23; // отступ сверху
	divRC.style.marginLeft = 22; // отступ слева
	divRC.style.height = 10; // высота
	divRC.style.position = 'relative';

	pText.style.marginTop = -13; // отступ сверху
	pText.style.marginLeft = 140; // отступ слева
	pText.style.fontSize = 14+"px"; // размер шрифта
	pText.style.fontFamily = "sans-serif"; // название шрифта
	pText.style.fontWeight = "bolder"; // начертание шрифта
	pText.style.textAlign = 'center'; // расположение текста

}
Load_run();

Весь скрипт целиком:

function Load_run() {

	var body = document.getElementsByTagName('body')[0];
	var divC = document.createElement('div');
	var divR = document.createElement('div');
	var divRC = document.createElement('div');
	var pText = document.createElement('p');
	var prNum = 0;
	divC.appendChild(divR);
	divC.appendChild(divRC);
	divC.appendChild(pText);
	pText.innerHTML = "...";
	body.appendChild(divC);

	var a=setInterval (function() {

	divRC.style.backgroundColor='#F08080';
	prNum+=6;
	pText.innerHTML = "Идет загрузка: "+prNum+" %";
	divRC.style.width = prNum+"px";

		if (prNum >= 100 ) {
			pText.innerHTML = "Загрузка завершена";
			divRC.style.width = 100+"px";
			clearInterval(a);
		}
	},500);


	divC.style.border = 'dotted';
	divC.style.backgroundColor = "#F5F5F5";
	divC.style.borderColor = '#E6E6FA';
	divC.style.position = 'absolute';
	divC.style.width = 320;
	divC.style.height = 75;
	divC.style.marginTop = 20;

	divR.style.borderRadius = 5;
	divR.style.width = 99;
	divR.style.height = 10;
	divR.style.backgroundColor = '#FFF0F5';
	divR.style.borderRadius = 5;
	divR.style.border = "groove";
	divR.style.marginTop = 20;
	divR.style.position = 'fixed';
	divR.style.marginLeft = 20;

	divRC.style.borderRadius = 4;
	divRC.style.zIndex = 999;
	divRC.style.marginTop = 23;
	divRC.style.marginLeft = 22;
	divRC.style.height = 10;
	divRC.style.position = 'relative';

	pText.style.marginTop  = -13;
	pText.style.marginLeft = 140;
	pText.style.fontSize = 14+"px";
	pText.style.fontFamily = "sans-serif";
	pText.style.fontWeight = "bolder";
	pText.style.textAlign = 'center';

}

Load_run();

Пример работы скрипта.