Como crear un ProgressBar o barra de progreso

En este ejemplo podemos ver como crear un ProgressBar o barra de progreso de una manera muy sencilla, ademas el código esta explicado y tenemos una demo:

Código:

<link rel="stylesheet" href="http://www.phpres.net/basecss/css/base.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div class="barra">
<div class="barra-progreso barra-progreso-azul" id="progreso">0%</div>
</div>

<script>
	$(document).ready(function(){
		//Iniciamos en 0
		var inicio=0;
		//Creamos el intervalo de 100 milesimas
		var progreso=setInterval(function(){
			inicio+=0.5;
			//Cambiamos el valor de la barra
			$('#progreso').css('width', inicio+'%');
			//Cambiamos el valor del texto
			$('#progreso').text(parseInt(inicio)+'%');
			//Paramos al llegar a 100%
			if(parseInt(inicio)>=100){
				clearInterval(progreso);
			}
		},100);
	})
</script>

<script src="http://www.phpres.net/basecss/js/base.js"></script>

Demo:
http://codepen.io/anon/pen/obGdzz

Salu2
Editado

Hola amigo como puedo hacer lo mismo pero mientras subo archivos img ?