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.

Personaliza el reproductor de audio SoundCloud con ToneDen SDK

La transmisión de audio ha existido en Internet desde 1990 y no hay muchas plataformas populares de transmisión de audio para elegir a partir de ahora. Uno de los más populares es SoundCloud, que tiene algunas ventajas claras sobre sus competidores, incluida la facilidad de inserción.Si bien el reproductor insertado es muy fácil de usar y receptivo, puedes ponerlo en la barra lateral, en una publicación o en una página principal, puedes limitarlo a la hora de personalizar el reproductor. Solo

(Consejos de tecnología y diseño)

Aplicación de jQuery UI Datepicker Theme para WordPress 3.8 y superior

WordPress ha cambiado mucho desde la versión 3.8, especialmente el tema de interfaz de usuario de administrador. Después de las masas, la interfaz de usuario de administración de WordPress ahora se ve más plana, sin degradados ni sombras . Significa que, si tiene un tema o un plugin incorporado que utilizó una IU personalizada, es hora de un cambio de imagen .Como

(Consejos de tecnología y diseño)