Progress Bar v2.0-

essential 0 182 Views

This version is more precise and accurate compared to my first posted version of this script.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Progress Bar v2.0-</title>
<style id="internal" type="text/css">
/* <![CDATA[ */
html, body {
  border : none;
  font : normal normal normal 95%/1.6 Verdana, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  width : auto; }

body {
  background-color : #f0f0f0;
  color : #405060; }

div {
  border : none;
  margin : 0;
  padding : 0; }

div#main {
  margin : 0 auto;
  width : 100%; }

table {
  background-color : #fff;
  border : 1px solid #ccc;
  border-collapse : collapse;
  min-height : 600px;
  text-align : center;
  width : 100%; }

td { vertical-align : middle !important; width : 12%; padding : 0; }

td div.bar { background-color : #f0f0f0; max-height : 30px !impotant; border-top : 1px solid #eee; border-bottom : 1px solid #eee; line-height : 30px; color : #778899; font-weight : 700; font-size : 14pt; }

/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var meter;
var count;
var loading;
var timer;
   loading = "LOADING"
   count = 0;
   meter = function() {
   td = (( document.getElementsByTagName ) ? document.getElementsByTagName("td")[ count ].getElementsByTagName("div")[ 0 ] : document.all.tags("td")[ count ].all.tags("div")[ 0 ] );
if ( count === (( loading.length ) - 1 )) {
   self.location.reload();
   }
   try {
   td.className = "bar";
   td.innerHTML = loading[ count ];
   } catch( e ) {
   myClass = document.createAttribute("class");
   myClass.nodeValue = "bar";
   td.setAttributeNode( myClass );
   td.innerHTML = loading[ count ]; 
   } count++;
};
   Function.prototype.timer = function( DELAY ) {
   if (( typeof DELAY === "number" ) && ( DELAY !== undefined )) {
   return setInterval( this, DELAY );
   } else {
   return alert( "This (" + DELAY + ") is not a valid delay counter!" );
   }
};
window.onload = function() {
  counter = meter.timer( 2000 );

};   
// ]]>
</script>
</head>
<body>
<div id="main">
<table id="progress" frame="void" rules="none" summary="Javascript, Progress Bar version 2.0">
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview