Sube tu logo. El estado de carga es un loop continuo de tu logo exacto y, cuando termina la espera, puede reproducir una reacción de éxito o de error y volver al reposo. Usa el .riv para un loader que reacciona, WebM y MOV transparentes para overlays, y MP4 o GIF donde solo sirva un archivo simple.
Este es el .riv real que entrega nuestro motor, reproduciéndose en tu navegador. Es la misma máquina de estados que controlas desde tu app con un input numérico y un trigger por cada reacción puntual.
Espera y luego muestra el resultado
const vm = r.viewModelInstance; // Character view model
vm.number("mood").value = 5; // loading loop
try {
await save();
vm.number("mood").value = 0; // rest on idle after the reaction
vm.trigger("success").trigger(); // plays once
} catch {
vm.number("mood").value = 0;
vm.trigger("error").trigger();
}
Un trigger se reproduce una vez y vuelve al estado de ánimo actual, así que el logo siempre termina en reposo (idle).
Ten en cuenta
Es un loader indeterminado: no tiene input de porcentaje completado. Para esperas largas, combínalo con una barra de progreso o con texto.
Tu logo se anima tal cual. No es un spinner de CSS, SVG ni Lottie.
Los GIF vienen sobre un fondo sólido; no hay GIF transparente. Sobre imágenes o video, usa el .riv o el WebM con un MOV HEVC para Safari.
Diseña, anima y obtén enlaces de descarga en el chat
Incluido
Planes
Empieza gratis. Mejora tu plan cuando necesites más.
Un loader que reacciona cuando termina un proceso necesita el .riv, y un loader sobre el contenido de la página necesita WebM o MOV transparente: ambos están en todos los planes de pago, desde Starter ($20/mes). Cada set también incluye el loop en MP4 y GIF con fondo sólido. Precios en USD; Creem calcula los impuestos al pagar.
¿Puedo usar un loader con mi logo como preloader en WordPress, Webflow o Framer?
Sí. Webflow reproduce el .riv de forma nativa y Framer lo hace con su plugin oficial de Rive. WordPress necesita un plugin de Rive o un embed de HTML personalizado; también puedes usar el WebM transparente con una fuente MOV HEVC en un bloque de video. Oculta el preloader en cuanto la página esté lista, no después de un tiempo fijo.
¿Hay una versión en GIF transparente de la animación de carga?
No. Los GIF vienen sobre un fondo sólido a 480 px, lo que funciona cuando el loader está sobre un color que coincide. Para un loader sobre imágenes o video, usa el WebM transparente para Chrome, Firefox y Edge con el MOV HEVC para Safari, o el .riv, que es transparente en todas partes.
¿La animación de carga con logo hace un loop continuo?
Sí. El loop empieza y termina en la misma pose, así que no hay ningún salto en la unión, ni en el .riv ni en los videos ni en el GIF. En el .riv, además, pasa con suavidad a success, error o idle cuando cambias de estado.
¿El loader puede mostrar el progreso en porcentaje?
No. El estado de carga es un loop indeterminado sin input de porcentaje. Para esperas de más de unos diez segundos, muestra una barra de progreso o texto al lado y dispara el trigger success cuando termine el trabajo.
¿Cuánto pesa el archivo de una animación de carga con logo?
El .riv de un logo plano suele pesar entre 35 y 45 KB con las 17 animaciones; los logos detallados o 3D conservan sus píxeles, así que calcula alrededor de 1 MB. A eso se suma el runtime web de Rive (unos 373 KB con brotli en el build canvas-lite). Si el loader nunca necesita reaccionar, un solo loop en WebM transparente evita el runtime.
Archivo de Rive en vivo
