5 iconos · licencia MIT

Iconos animados de carga

Spinners y loaders que se repiten en bucle mientras algo está en curso. Pon uno dentro de un botón de envío mientras se ejecuta una petición, en lugar del contenido que aún se está cargando o en una pantalla de bienvenida a pantalla completa; se quedan quietos cuando el usuario prefiere movimiento reducido.

Los 5 iconos se reproducen sin parar. Cada uno se ofrece como componente de React, componente de shadcn/ui y animación Lottie JSON (2 de ellos también como SVG estático), gratis para uso comercial con la licencia MIT.

Todos los iconos de carga

Dónde usarlos

Botones de envío a la espera de una petición
Placeholders mientras se carga una lista o un gráfico
Indicadores de scroll infinito y de cargar más
Pantallas de bienvenida y transiciones entre rutas
Progreso de subida y procesamiento de archivos

Por interacción

Iconos animados en bucle · 5
Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Añade uno a tu app

Con React, instala react-useanimations e importa el icono; reproducirá por sí solo su interacción “Bucle”. Todos los iconos de esta categoría funcionan igual: cambia loading por el nombre que aparece en la página de cada uno.

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={32} />

Con shadcn/ui, la CLI añade un componente listo para usar:

npx shadcn@latest add https://useanimations.com/r/loading.json

import { AnimatedLoading } from '@/components/animations/loading';

<AnimatedLoading size={24} />

¿No usas React? Cada icono es un archivo Lottie JSON en /icons/<id>.json; en Iconos Lottie encontrarás reproductores para web, iOS, Android y Flutter.

Preguntas frecuentes

¿Qué iconos animados de carga se incluyen?

5 iconos: Infinity, Loading circular, Loading V2, Loading V3 y Loading V4. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de carga en React?

Instala react-useanimations, añade import loading from 'react-useanimations/lib/loading' y renderiza <UseAnimations animation={loading} size={32} />. El icono reproduce su interacción “Bucle” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar npx shadcn@latest add https://useanimations.com/r/loading.json.

¿Puedo usar estos iconos animados de carga sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/loading.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter; los SVG estáticos están en la página de cada icono (en inglés). Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.