Código PHP:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
body {
font: 80% 'trebuchet ms',helvetica,sans-serif;
}
.progress-bar {
border: 1px solid #56577A;
width: 200px;
margin: 5px;
padding: 1px;
background: #fff;
float: left;
}
.bar {
height: 15px;
font-size: 11px;
text-indent:-9000px;
}
</style>
<script type="text/javascript">
window.onload = function() {initialize()}
</script>
<script>
function initialize() {
divId = 'sample';
thedivId = document.getElementById(divId);
var percentage = thedivId.innerHTML;
thedivId.style.backgroundColor= "red";
brim(divId,0,parseInt(percentage.substr(0, percentage.length-1)));
var men = 20;
if ((men > 0) && (men <= 10) ){document.getElementById('mensaje').innerHTML = "Hola mundo 1"; window.setTimeout('unaTabla.style.visibility = "visible"', 1000);}
if ((men > 10) && (men <= 20) ){document.getElementById('mensaje').innerHTML = "Hola mundo 2"; window.setTimeout('unaTabla.style.visibility = "visible"', 1500);}
if ((men > 20) && (men <= 30) ){document.getElementById('mensaje').innerHTML = "Hola mundo 3"; window.setTimeout('unaTabla.style.visibility = "visible"', 2000);}
if ((men > 30) && (men <= 40) ){document.getElementById('mensaje').innerHTML = "Hola mundo 4"; window.setTimeout('unaTabla.style.visibility = "visible"', 2500);}
if ((men > 40) && (men <= 50) ){document.getElementById('mensaje').innerHTML = "Hola mundo 5"; window.setTimeout('unaTabla.style.visibility = "visible"', 3000);}
if ((men > 50) && (men <= 60) ){document.getElementById('mensaje').innerHTML = "Hola mundo 6"; window.setTimeout('unaTabla.style.visibility = "visible"', 3500);}
if ((men > 60) && (men <= 70) ){document.getElementById('mensaje').innerHTML = "Hola mundo 7"; window.setTimeout('unaTabla.style.visibility = "visible"', 4000);}
if ((men > 70) && (men <= 80) ){document.getElementById('mensaje').innerHTML = "Hola mundo 8"; window.setTimeout('unaTabla.style.visibility = "visible"', 4500);}
if ((men > 80) && (men <= 90) ){document.getElementById('mensaje').innerHTML = "Hola mundo 9"; window.setTimeout('unaTabla.style.visibility = "visible"', 5000);}
if ((men > 90) && (men <= 100) ){document.getElementById('mensaje').innerHTML = "Hola mundo 10"; window.setTimeout('unaTabla.style.visibility = "visible"', 5500);}
}
function setWidth(o, start) {
o.style.width = start+"%";
}
function brim(Id,start,percentage) {
if (document.getElementById) {
o = document.getElementById(Id);
if (start <= percentage) {
setWidth(o, start);
start += 1;
document.getElementById('percentage').innerHTML = (start -1) + "%";
window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 50);
}
}
}
</script>
</head>
<body>
<table align="center">
<tr><td>
<div class="progress-bar" style="vertical-align: middle">
<div id ="sample" class="bar">20%</div>
</div>
</td></tr>
<tr align="center"><td >
<div id ="percentage" style="font-size:40px"></div>
</td></tr>
<tr id="unaTabla" style="visibility: hidden;" align="center">
<td ><div id="mensaje"></div></td>
</tr>
</table>
</body>
</html>
