Inicio Novedades Barra de progreso, ¿cómo crear una con PHP y CSS?
about barra de progreso con PHP y CSS

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

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

por entreunosyceros

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 tu comentario

* Al utilizar este formulario, acepta que este sitio web almacene y maneje sus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

logo expressVPN - Obtén 30 días gratis

Si te preocupa la seguridad de tus datos, o si quieres saltarte los geobloqueos para ver tus streamings favoritos, consigue una VPN segura y de calidad GRATIS durante 30 días (cancela cuando tú quieras, sin coste alguno). Disponible para todas las plataformas y navegadores.