Cree cargadores y hilanderos de un solo elemento con CSSPIN

Puedes construir algunas cosas increíbles con CSS3, desde campos de entrada personalizados a Listas deplegables e incluso gráficos vectoriales. Estas tecnicas son superando rápidamente a JavaScript, Haciendo más fácil para los desarrolladores crear mejores experiencias de usuario.

Una de las cosas más difíciles de construir es una cargando animación de spinner Pero la animación CSS moderna incluso hace que eso sea bastante simple..

Para ahorrar tiempo construyendo desde cero, puedes usar una biblioteca como CSSPIN con toneladas de hilanderos predefinidos personalizados. Todas estas animaciones son de clonación gratuita y de código abierto, por lo que tienes Acceso completo para editar el codigo como desees.

Configurar una ruleta con esta biblioteca es muy fácil. Tu solo copiar la biblioteca CSS en tu página, entonces agrega los elementos HTML personalizados donde quieras que aparezcan.

Estos hilanderos personalizados usan solo un elemento HTML para crear el efecto de animación. Esto es enorme porque el gráfico y el efecto de animación son renderizado puramente a través de clases CSS.

Y, como tiene acceso al código fuente, puede Reemplaza formas, colores, tamaños y velocidades de animación. para adaptarse mejor a tus proyectos.

Solo nota el código usa la sintaxis LESS, por lo que tendrá que estar familiarizado con ese lenguaje de preprocesamiento para realizar ediciones importantes.

Pero, puedes encontrar un montón de ejemplos CSS simples en la página principal de demostración, junto con instrucciones simples en la página de GitHub.

Si estas familiarizado con npm o Cenador estos son metodos alternativos para instalar la biblioteca.

No importa cómo lo instales, esta es una excelente biblioteca de animación CSS con la que trabajar. Que está destinado a ser completamente modular con mucho espacio para nuevos spinners, nuevas animaciones y personalizaciones de otros desarrolladores.

Para obtener más información y navegar a través de toda la documentación, echa un vistazo a la Repo de CSSPIN en GitHub. El creador también hizo una pequeña. configurar el video que puedes ver abajo.