Hoy vamos a ver como podemos generar nuestra propia barra de progreso de una menra muy fácil y sencilla.
JQuery nos permite generarlas a través de una función propia que nos dan. Es tan simple como inicializar una función sobre un bloque indicandole el valor que tiene que tomar la barra de progreso y ya estaría lista.
Podemos ver un ejemplo de como quedaría en la siguiente imagen:
Para implementarlo debemos empezar, como siempre, incluyendo las librerías necesarias:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
A continuación, necesitamos un bloque sobre el que cargar la barra de progreso:
<div id="progressbar"></div>
Y por último debemos inicializar el script sobre el bloque anteriormente creado. Para ello debemos escribir el siguiente script:
<script type="text/javascript">
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
</script>
Y con estos pasos tan sencillos podemos crear nuestra propia barra de progreso, la cual podremos modificar su estilo a través de los css.
Os dejo el código completo del ejemplo:
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="progressbar"></div>
</body>
Además podeis ver la documentación de todo en el siguiente enlace.
Espero que os sea de utilidad.