Progress Bar
Version 1.00
written by W3 Schools

This is based upon an example found in the W3 Schools website. I've just modified it slightly with changed colours, a percentage display and rounded corners.

Click here for a demo

Stylesheet for 'Progress Bar':
#ProgressText
{
 width:800px;
 height:16px;
 margin:auto;
 color: #0000FF;
 text-align: center;
}
#ProgressContainer
{
 width: 800px;
 height: 16px;
 margin: auto;
 border: 2px Solid #007777;
 border-bottom-right-radius:16px;
 border-top-right-radius:16px;
 border-bottom-left-radius:16px;
 border-top-left-radius:16px;
 overflow: hidden;
}
#ProgressBar
{
 width:0%;
 height:16px;
 background-color:#00CCCC;
}
Javascript for 'Progress Bar':
function move()
{
 var elem = document.getElementById("ProgressBar");   
 var width = 1;
 var id = setInterval(frame, 30);
 function frame()
 {
  if (width >= 100)
   clearInterval(id);
  else
  {
    width++; 
    elem.style.width = width + '%'; 
    document.getElementById('ProgressText').innerHTML=width+'%';
  }
 }
}
Click here to download.

If you would like to email me, put gerald@ in front of the domain name, insead of www..
©2011-2020 Gerald Holdsworth IT Services