Obtener CódigoDemo

Luego de unas vacaciones merecidas, me veo trabajando actualmente en un proyecto en el cuál tenía que implementar una barra de progreso que muestre el porcentaje del formulario según éste se esté llenando.

Lo primero que se nos ocurre es validar cada elemento del formulario para sumarlos y obtener el total de campos que tenemos y según esto podemos sacar un porcentaje de cada; esto sería válido, pero engorroso de hacer si tenemos un formulario que sería dinámico. Para darle solución, tenemos a la mano un plugin (que conseguí navegando por los mares del internet, codecanyon) que se encarga de hacer ésto por nosotros. Recuerda siempre: si la rueda está inventada, no la vuelvas a crear.

Una barra de progreso de formularios con jQuery

1. Lo primero que haremos, es descargar éstos 2 archivos que son la hoja de estilos y el javascript. Click Aquí
2. Ahora, vamos a incluírlo en nuestro documento HTML, y a la vez la librería de jQuery 1.9+.
3. Una vez lo tengamos incluído, podemos crear nuestro formulario agregando a cada campo la clase «.required» la cuál será usado como indicador para el contador porcentual.
4. Teniendo ya creado el formulario y los archivos añadidos correctamente, podemos adicionar nuestra barra que será usada para mostrar el porcentaje en que se va llenando el formulario.
5. El siguiente html, es el contenedor en el cual se mostrará el porcentaje:

   <div class="meter">
       <div id="percentage"></div>
   </div>

    

6. Agregamos el siguiente código en el footer de nuestro documento:

   <script type="text/javascript">
   $(function(){
   $('#percentage').formProgress({
   speed : 500, // Duración de la animación
   style : 'green', // Clase asignada a tu barra de progreso
   bubble : false, // Mostrar el porcentaje debajo de la barra de progreso
   minPercent : 45, // Límite mínimo para permitir enviar el formulario
   message : 'Llenar los campos !', // Mostrar error
   selector : '.required' // La clase asignada a cada campo
   });
   });
   </script>

Teniendo ésto creado, ya podemos hacer uso de ésta barra de progreso para formularios con jQuery.

Date una vuelta por la documentación del archivo: http://www.formeter.techlabs.ro/documentation/index.html

Obtener CódigoDemo