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.

Esta foto de fresa sin rojo está rompiendo Internet

Esta foto de fresa sin rojo está rompiendo Internet

Internet está lleno de imágenes que le dan una perspectiva totalmente diferente si las mira de cerca. El famoso arte 3D y la fotografía en perspectiva forzada son buenos ejemplos. Del mismo modo, una imagen interesante ha estado circulando en internet, desconcertando a la gente sobre sus propiedades.A

(Consejos de tecnología y diseño)

MENOS CSS - Guía para principiantes

MENOS CSS - Guía para principiantes

El preprocesador CSS se ha convertido en un elemento básico en el desarrollo web. Envía CSS simple con características de programación como Variables, Funciones o Mixin, y Operación que permiten a los desarrolladores web crear estilos CSS modulares, escalables y más manejables .En esta publicación, analizaremos LESS, que ha sido uno de los preprocesadores de CSS más populares y también se ha implementado ampliamente en numerosos frameworks de front-end como Bootstrap. También

(Consejos de tecnología y diseño)