Hola a todos!
Este es uno de los pocos tutoriales que he creado, así que espero que opineis y saqueis conclusiones para poder mejorar en mis futuros tutoriales (Si hago mas claro está).
Lo primero de todo, la explicación:
Un progress bar es una barra en la que se muestra un porcentaje sobre 100 en el que según el valor introducido muestra un porcentaje u otro.
Haber... empezemos:
1.- Imágenes necesarias (Las imagenes son muy pequeñas.) prc_blue.png: 
prc_back.png: 
2.- Código y explicacion¿Tenemos las imágenes? ¡Perfecto! Ahora tenemos que elaborar un código en el que se pueda mostrar el porcentaje y todo lo necesario para hacer lo que deseamos.
Insertamos este codigo en un archivo .PHP
function barra($barra, $color) {
echo"<a title=".$barra."/100>";
$barra = $barra/100*100;
echo'<div align="left" style="border: 2px solid rgb(0, 0, 0); width: 100;height:10; padding: 1px; margin: 5px; background-image: url(prc_back.png);">';
echo'<div align="center" style="background-image: url(prc_'.$color.'.png);width:'.$barra.'; height:10"><div align="center"><font color="black" size="1"><div style="padding-bottom:2px; text-align: left;">'.$barra.'%</div></font></div></div></div>';
echo"</a>";
}Ahora, la explicación1.- Con function bara($barra,$color) { } Creamos una funcion, para que al necesitar introducir el codigo en otro codigo solo tendremos que poner:
barra($barra,blue); ($barra es el porcentaje)
2.- La variable
$barra lo que hace es dividir el numero de la funcion
$barra entre 100 y multiplicarlo por 100.
3.- Los divs especifican el grosor del borde... fondo... entre otras cosas...
Y ahora prueba lo que has creado. Verás que todo salió perfectamente.
Información Adicional: La imágen
prc_blue.png puedes crear otra y copiar la de
prc_blue.png pintarla de rojo y guardarla como
prc_red.png Por ejemplo.
Siento no poder poner vista previa, pero mi ordenador no me deja abrir programas de diseño grafico ni cualquier programa del ordenador.
Bueno, espero que os haya servido el Tutorial!
Fuente:
GuayAngel12 y
javipilo que me dio una base por la que empezar hace mucho tiempo
Saludos!
