Barra de progreso con JQuery

por

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:

Barra de progreso

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.

COMENTARIOS

DEJA TU COMENTARIO