es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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:

  

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.

20 diseños de invitación para eventos que impresionarán a tus invitados

20 diseños de invitación para eventos que impresionarán a tus invitados

Desde fiestas a la parrilla hasta bodas y cumpleaños, una tarjeta de invitación es casi tan esencial como el evento en sí. Aunque puede simplemente crear un evento en Facebook, enviar correos electrónicos personalizados o llamar a personas por teléfono . Sin embargo, en nuestro mundo digitalmente desordenado, se siente bastante especial recibir una invitación en papel de la vieja escuela por correo ordinario .Las t

(Consejos de tecnología y diseño)

10 podcasts Todos los desarrolladores web deberían suscribirse a

10 podcasts Todos los desarrolladores web deberían suscribirse a

Si viaja largas distancias para estudiar o trabajar, hay muchas formas de aprovechar ese tiempo de viaje. Por ejemplo, puede escuchar audiolibros o suscribirse a podcasts para escuchar en el autobús o el tren. Si bien hay muchos podcasts para que revises, creemos que quizás quieras comenzar a trabajar inmediatamente, así que hicimos la investigación por ti.Aqu

(Consejos de tecnología y diseño)