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

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

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.