Crear un efecto de carga incorporado en los botones con LADDA

Hay varios tipos de animación que puede aplicar en su página web. Animación de texto, cuadro modal, transición y el indicador de progreso. Para los indicadores de progreso, generalmente en forma de barras, el progreso que ve en la barra indica cuánto progreso se ha realizado (o cargado). Sin embargo, si le interesa el progreso dentro de un botón, pruebe con Ladda.

Ladda es un plugin de jQuery creado por Hakim El Hattab para darle el efecto de carga dentro de un botón . Es un concepto de UI que separa efectivamente la brecha entre acción y retroalimentación. Los usuarios recibirán un comentario en forma de indicador de carga en lugar de tener que abandonar la página. También hay disponible una versión de Ladda para WordPress.

Uso Básico

Ladda se puede utilizar como un complemento independiente que no necesita ninguna otra dependencia. Para empezar, primero tiene que incluir los archivos ladda.min.js y spin.min.js que puede obtener de la página de GitHub en su proyecto, de esa manera.

Para hacer que el botón aplique temas Ladda predeterminados, cargue el archivo CSS de ladda.min.css . Si solo desea los botones funcionales sin el tema, cargue el archivo ladda-themeless.min.css .

Marcado HTML

Para hacer que Ladda funcione, debes incluir la ladda-button en el botón. Aquí hay un ejemplo:

 Enviar 

Ladda también le brinda opciones dentro del HTML utilizando atributos de datos para el estilo del botón. Como puede ver arriba, el botón usa data-style de data-style de animación. Para aplicar un estilo diferente, puede consultar la lista completa en la página de demostración.

Para cambiar el color, puede usar data-color . Para el tamaño del botón, incluya data-size en el botón.

Fusionando con el Servidor

Y ahora, para hacer que la animación de carga se envíe al servidor (que volverá a cargar la página después de la animación) necesitaremos el método bind() . Esto vinculará los botones de progreso y simulará el progreso de carga:

También puede controlar sus botones utilizando Javascript API con el siguiente enfoque:

Conclusión

Con el apoyo de Bootstrap y su receptividad también, Ladda vale la pena probarlo en su proyecto. Además, ha sido probado y funciona bien en la última versión de Chrome, Firefox, Safari y IE9 y superior. No dude en hacernos saber lo que piensa en el cuadro de comentarios a continuación.

Más de 30 teclas rápidas de teclado de YouTube que debes conocer

Muchas personas hoy pasan la mayor parte de su tiempo en YouTube, ya sea con fines de aprendizaje o viendo algunos videos de gatos. Si eres uno de esos usuarios que pasa horas saltando de una recomendación de YouTube a otra, entonces definitivamente debes perfeccionar sus atajos de teclado.Echa un vistazo a esta lista de más de 30 atajos de teclado para hacer que tu uso de YouTube sea más productivo.At

(Consejos de tecnología y diseño)

30 diseños de currículum pendientes en los que desearías pensar

Es un mercado de trabajo competitivo en el que buscamos trabajo y lamentamos decir que los currículos creados en MSWord ya no lo van a cortar más. Hoy en día, especialmente si eres creativo, necesitas un currículum excelente para impresionar a los posibles empleadores . Cuando un posible cliente mira su currículum, todo lo que pone en su currículum es lo que está vendiendo por usted.No sol

(Consejos de tecnología y diseño)