Inicio Apuntes FPApuntes DAW Barra de progreso, ¿cómo crear una con PHP y CSS?

Barra de progreso, ¿cómo crear una con PHP y CSS?

Un ejemplo básico para crear una "progress bar"

Publicado por entreunosyceros
Publicado el: Última actualización:

Una vez más aquí. Hoy vengo a dejar un pequeño artículo por algo sobre lo que me han preguntado hace uno o dos días. El caso es que un usuari@ me decía que tenía que crear una barra de progreso para no sé que ejercicio que un profesor le había mandado. Por lo que me comentó este usuari@, me parece que se complicaba demasiado a la hora de hacer algo que puede resultar bastante sencillo. Por este motivo voy a pegar a poner a continuación un ejemplo básico, desde el que espero que la persona que me pidió consejo pueda sacar el ejercicio que le habían pedido adelante.

Crea una barra de progreso con PHP y CSS

barra de progreso creada con PHP y CSS

Para hacer una barra de progreso, como la que se puede ver en la anterior captura de pantalla, tan solo tendremos que escribir tan solo un par de div anidados. El primero de ellos servirá para dar el borde a la barra, y el interior será el que se va a colorear según el valor que se le indique. Este valor se lo daremos con una variable PHP en el código CSS.

Para que se pueda ver esto en funcionamiento, también vamos a crear un par de variables con la que calcular los valores necesarios para que la barra de progreso se mueva cada vez que refrescamos la página.

El código

<?php
/*Establecemos un número aleatorio entre 1 y 3000*/
$num = rand(1,3000);
/*Establecemos un número aleatorio entre 1 y el número que se genera aleatoriamente*/
$porcentaje = rand(1,$num);
/*Calculamos el porcentaje con los valores anteriores, y lo mostramos sin decimales*/
$resporcentaje = round(($porcentaje/$num) *100,0);
/*Imprimimos los resultados en texto*/
echo "El $porcentaje es el $resporcentaje% de $num";
?>

<style type="text/CSS">
/*Establecemos al ancho y alto del div exterior. Además le daremos un tamaño al borde y un color*/	
.divexterior{
	height: 25px;
	width: 400px;
	border: solid 1px #000;
}
/*Establecemos el div interior. Como ancho le vamos a dar el valor de la variable $resporcentaje. Este div lo vamos a colorear un con gradiente*/
.divinterior{
	height: 25px;
	width: <?php echo $resporcentaje; ?>%;
	border-right: solid 1px #000;
	color: #fff;
	background: rgb(2,0,36);
	background: linear-gradient(86deg, rgba(2,0,36,1) 0%, rgba(181,181,214,1) 0%, rgba(0,212,255,1) 100%);
}
</style>

<!--Estos div los utilizaremos para crear la barra de progreso. El exterior será el borde que se verá por fuera y el interior será el que se va a colorear con un gradiente de azules-->

<div class="divexterior">
	<div class="divinterior"><?php echo $resporcentaje; ?>%</div>
</div>

Este código se puede ver en funcionamiento en el siguiente enlace. El código está lleno de comentarios. Esta quizás no sea la mejor de las maneras de crear una barra de progreso, pero si me parece la más sencilla.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

4 Comentarios

luis 8 enero, 2023 - 3:02 AM

Muchisimas gracias justo lo que estaba buscando y no encontraba por ningun lado

Respuesta
entreunosyceros 8 enero, 2023 - 1:18 PM

Me alegro de que te resultase útil. Salu2 y gracias por el comentario.

Respuesta
yo 21 octubre, 2022 - 8:10 PM

Hombre, digo yo que se tendra que mover, no?

Respuesta
entreunosyceros 22 octubre, 2022 - 12:52 AM

Hola. Si refrescas las página se mueve de manera aleatoria. Pero vamos, si quieres algo más específico, siempre puedes hacerlo tú. Salu2.

Respuesta

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.