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:
http://codepen.io/anon/pen/obGdzz
Salu2
Editado
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
1
Puntos
Puntos
2692
Visitas
Visitas
1
Resp
Resp
Por alber hace 99 meses
Administrador