Barra de porcentaje de 2 colores

diego007 · #1 (**permalink**) 16/06/2012, 22:33

Hola amigos, tengo este codigo que muestra una barra de porcentaje que aumenta de forma progresiva como aumenta. Lo que quiero hacer es que muestre la barra que vaya de un color a otro (como degradado).

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>

De antemano muchas gracias!!