El 39 es el 4% de 878
<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: 4%;
	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">4%</div>
</div>