anton zamov it expert logo   best php scripts for your website

home page latest news web development curriculum vitae scripts contact me

  • C# (Microsoft .NET)
  • JAVA
  • Dynamic HTML
  • PHP & MySQL
  • ASP.NET - C# & VB.NET
  • Perl & CGI
  • C | C++
  • Vector Markup Language
  • SMIL
  • Assembler
  • Databases
  • Wap Development
  • Web site promotion
  • Web Marketing

How to create a DHTML loading (progress) bar?

(DHTML free example written by Anton Zamov.)

How to create a DHTML loading (progress) bar?

This is a basic animation, you have to ensure that the progress bar paasses through several control points in order to make a real progress bar (if you have any questions don't hesitate to contact me):

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link rel=stylesheet href=meta2.css type=text/css>
<title>proba universal loading</title>
.brd{border-width: 0px 0px 0px 0px;border-style: none;}

var colors=new Array("","#274957","#2c4d5b","#305260","#355764","#3a5b69","#3E606E","#436472","#486977","#4C6E7B","#517380","#567785","#5A7C89","#5F818E","#648593","#688A97","#6D8E9C","#7293A0","#7798A5","#7B9CA9","#BCEEF4");

var borne=1;
var ns=document.layers?1:0;
var bx=document;
var nbx=document;

function zx(){
if(ns) {
qx="<center><font color=white face=verdana size=1>"+(iqq*2)+"%</font></center><table border=1 width="+(iqq*4)+" bgcolor=#6C8D9B><tr><td></td></tr></table><br><br>g";
else {
//bx.innerHTML="<table border=0 width="+(iqq*4)+" bgcolor=#6C8D9B height=8><tr><td>"+(document.all?'':' ')+"</td></tr></table>"
nbx.innerHTML="<center><font face=verdana color=white size=1 >"+(iqq*5)+"% </font></center>"
if(iqq<21) {
if(nsaz<1000) nsaz+=300;
else nsaz+=500;
if(nsaz>250) nsaz=-150;

if(!ns) {
//bx.innerHTML="<center><font color=white size=1 >loaded 100%</font></center>";

function make(){
else bx=eval("document.getElementById('xz')");
else nbx=eval("document.getElementById('nxz')");

<body bgcolor="#224452" background="up.gif" scroll="no" onload="make();">

<table border="0" width=100% height=100%>
<td valign=middle align=center>
<table width="200" border="0" cellpadding="2">
<td align=left style="border-width: 1px 1px 1px 1px;border-style:solid;border-color:#80a1ae" class=brd>

<font size=2 face=verdana>
<table summary="" border="0" width=100% height=12>
<td id=t1></td>
<td id=t2></td>
<td id=t3></td>
<td id=t4></td>
<td id=t5></td>
<td id=t6></td>
<td id=t7></td>
<td id=t8></td>
<td id=t9></td>
<td id=t10></td>
<td id=t11></td>
<td id=t12></td>
<td id=t13></td>
<td id=t14></td>
<td id=t15></td>
<td id=t16></td>
<td id=t17></td>
<td id=t18></td>
<td id=t19></td>
<td id=t20></td>

if(document.layers) document.write("<ILAYER id=xz_ width=200 height=25><LAYER id=xz__ width=200 height=25> </layer></ilayer>");
else document.write('<div id=xz></div>');
      if(document.layers) document.write("<ILAYER id=nxz_ width=200 height=25><LAYER id=nxz__ width=200 height=25> </layer></ilayer>");
else document.write('<div id=nxz></div>');



Still have questions? Ask your question on or find more examples on

If this example was useful for you, please support my company and click Like on the button below. Thank you very much!

Jobs Portal, poweful jobs board software

PHP Mall, multi vendors mall website software

Car Portal, php script for auto classifieds websites

NetArt Media, software products and services

Real Estate Portal, web software for real estate portals

Blog System, multi user blog hosting script

PHP Store, powerful e-commerce system written in PHP

Pharmacy System, software for running online pharmacies

C# (Microsoft .NET) | JAVA | Dynamic HTML | PHP & MySQL | Perl & CGI | C | C++ | Vector Markup Language
SMIL | Assembler | Databases | Wap Development | Web site promotion | Web Marketing

Copyright Anton Zamov 1998-2012