Los cargadores o loaders CSS son un tipo de animación que se utiliza para mostrar al usuario el progreso de carga del contenido en una página web. El más clásico es la barrita de carga o el circulito que va girando pero existen muchos otros tipos que son muy creativos y van a hacer que tu web se vea super profesional.
Hace poco te contamos que es el WPO y como lo podemos implementar para mejorar el tiempo de carga de un sitio web, si aun no lo viste y tu sitio se demora un poco en cagar, estos recursos que traigo en este articulo quizás pueda ayudarte a retener al usuario mientras tu sitio web carga.
Índice de contenidos
7 Webs con generadores de Loaders en CSS
Si estas pensando, «no es para mi, yo no se programar» o «yo no se CSS, no lo voy a poder hacer» quédate tranquilo ya que aquí voy a compartir contigo 7 sitios web con las cuales podrás crear animaciones de carga, estos generadores son completamente gratis, solo debes elegir el loader que más te guste y copiar el código para pegar en tu sitio web.
1 – Universe.io
Universe.io es de ese tipo de recursos que debes guardar entre tus favoritos ya que te puede sacar de varios apuros. Anteriormente este sitio se llamaba cssbuttons.io pero luego fueron agregando otros recursos por lo cual cambiaron a un nombre más versátil.
En ese sitio ahora puedes generar cargadores en css, pero también encontraras generado de botones, checkbox, tarjetas, campos para formularios de contacto, buscadores etc, y toogle switches. Todos estos recursos en CSS. En la barra lateral izquierda deberás elegir que quieres crear, aparecerán todas las opciones disponibles, seleccionas la que mas te gusta y de darán el código HTML y CSS que debes usar.
100L5
100L5.io es otra de esas joyas ocultas que hay en internet. Es un todo terreno como lo es TinyWow que te mostramos hace poco. Volviendo a 100L5 vas a encontrar desde generadores de post para Instagram, generadores de background CSS, herramientas para transformar imágenes, entre muchísimas otras utilidades y obviamente dentro de todas estas encontré un generador de loaders (url de la herramienta).
Usarlo es muy simple, una vez que elijes la animación que mas te gusta, posiciones el mouse sobre la misma y veras dos opciones, una que es personalizar el código, donde podrás elegir los colores de tu sitio, el tamaño del grafico y la velocidad de la animación y la segunda opción es la de obtener el código donde veras en primer lugar el Div html y en segundo el codigo css.
Loading.io
Loading.io sin dudas queda guardado con los otros sitios en mis favoritos. Un sitio con multiples herramientas donde encontraras generadores de backgrounds y patrones en CSS, textos animados que también sirven de animación de carga, iconos animados y comunes, barras de progreso y obviamente, un generador de animaciones de carga que al igual que en los sitios anteriores, solo debes seleccionar tu favorita y obtener el código.
CSS Portal
Cssportal.com Portal alberga muchos ejemplos de CSS y cómo se puede utilizar en el diseño de sitios web. Aquí encontrará todas las propiedades de CSS y muchos generadores de CSS para ayudarte en muchas tareas de diseño.
Aquí veras generadores CSS para hacer Div con borde redondeado, agregar sombras CSS, botones, columnas y el generador de cargadores para páginas web en css entre muchas otras utilidades.
SVGator
No me canso de repetir esto, tienes que guardar svgator.com. Todos los recursos de hoy son super geniales y este no escapa de esa lista. A diferencia de los otros sitios que se centran en CSS SVgator te permite generar imágenes SVG animadas con una calidad pocas veces vista.
Obviamente, al ser una herramienta super especializada hay que pagar para poder usarla, pero tiene algunas funciones gratuitas y entre ellas adivina cual esta….. si, acertaste, el generador de animaciones de carga en css. Aquí deberás registrarte y crear una cuenta gratis para acceder a ciertas funciones
CSS Load
Cssload.net es un sitio bien de nicho y centrado en una sola función, la de generar animaciones de carga en css y html. Encontraras animaciones divididas en categorías como 3D, barras, spinners, textos animados y muchas otras opciones.
Alguna de las animaciones son editables, otras no, pero funciona igual que el resto, seleccionas la que más te guste, y obtendrás el código a utilizar.
CssLoad es parte de onlinegenerator.net un sitio que ofrece diferentes generadores especializados en cosas puntuales.
HTML code generator
El ultimo de la lista es html-code-generator.com que como dice su nombre ofrece diferentes herramientas generadoras como html y css minifi, formateador de css, html y java, conversores, y otras utilidades. Nosotros obviamente llegamos ahí porque tiene un generador de animaciones de carga en css (aquí el link a esa utilidad).
Puedes navegar el sito web ya que seguramente encontraras algo que puedas guardar para cuando lo necesitas.
Y esto es todo por hoy, si luego de ver estos recursos te dan ganas de aprender CSS te recomiendo que veas el articulo con librerías de animación CSS o el post en el que hablamos sobre CSS Reference un sitio donde podrás aprender a escribir hojas de estilo para tu sitio web.
