Logo loading animation

A loading animation made from your own logo.

Upload your logo mark. The loading state is a seamless loop of your exact logo, and when the wait is over it can play a success or error reaction and settle back to rest. Use the .riv for a loader that reacts, transparent WebM and MOV for overlays, and MP4 or GIF where only a plain file will do.

See it in your app See plans

Loop: Seamless, your logo as-is
Finish: success or error one-shot
Files: .riv, WebM, MOV, MP4, GIF
Plan: Starter, $20/month

Live Rive file

Loops

Play once

This is the actual .riv our engine delivers, playing in your browser. It's the same state machine you drive from your app with one number input and a trigger per one-shot.

Wait, then show how it went

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();
}

A trigger plays once and returns to the current mood, so the logo always comes to rest on idle.

Good to know

It's an indeterminate loader: there is no percent-done input. For long waits, pair it with a progress bar or text.
Your logo is animated as-is. This is not a CSS, SVG or Lottie spinner.
GIFs come on a solid background; there is no transparent GIF. Over images or video, use the .riv or WebM with an HEVC MOV for Safari.
Under about a second, show nothing: a loader that flashes feels slower. See how long loading animations should run.

One loader, every place you wait

Where	File
Website preloader	.riv, or transparent WebM with HEVC MOV for Safari
App loading screen	.riv (mood 5), or HEVC-alpha MOV on iOS
Button or inline spinner	.riv at small size
Email, chat, docs	GIF on a solid background
Video and presentations	Transparent MOV

Real output

Delivered files, exactly as you'd download them.

MP4 Every set

1080 × 1080 at 60 fps. Here: Gummo’s wave, from a delivered set.

Transparent WebM & MOV Every set

Alpha channel included, so the checkerboard shows through. MOV is HEVC with alpha for Apple apps and editors.

Kiko thinking, GIF output — GIF Every set
Light previews for docs, email and chat. Kiko’s “thinking” loop.

9:16 launch video Every set

1080 × 1920 for stories and splash screens. Sizzle’s launch intro.

kiko.riv · 150 KB

CharacterStateMachine: number input mood
0–9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention
triggers: success · error · yes · no · enter · exit
LaunchStateMachine: launch → idle, plays once

Rive state machine Every set

One small file instead of 17 videos. It’s what powers the demo at the top of this page.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export function Kiko({ mood = 0 }) {
  const { rive, RiveComponent } = useRive({
    src: "/kiko.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  const input = useStateMachineInput(rive, "CharacterStateMachine", "mood");
  if (input) input.value = mood; // 0 idle · 1 happy · 2 wave · 3 thinking · 4 sad · 5 loading …
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

Paste-ready code Every set

Web, React and SwiftUI components named after your character.

Formats included per plan
Format	Specs	Best for	Starter & All in one
MP4	1080 × 1080, 60 fps, all 17 animations	Apps, socials, decks, product videos	Included
9:16 launch video	1080 × 1920 MP4	Stories, Reels, splash screens	Included
GIF	480 px previews, solid background	Docs, email, chat, README	Included
Rive (.riv)	Vector; Data Binding view model + legacy inputs: mood for loops, triggers for one-shots, launch machine	Interactive apps and sites (web, iOS, Android, Flutter)	Included
Transparent WebM	VP9 with alpha, 1080 × 1080	Web overlays on any background	Included
Transparent MOV	HEVC with alpha	Final Cut, Keynote, iOS, Safari	Included
Code	Web (HTML), React and SwiftUI components	Paste in and ship	Included
Download all (.zip)	Rive file, code, README and posters in one archive	Hand-off to your team	Included
Video export	MP4, GIF, transparent WebM and MOV, 9:16: pick formats and animations on the set page, ready in about a minute	Only the videos you need	Included
AI assistants (MCP)	Claude, Cursor, VS Code and Codex	Design, animate and get download links in the chat	Included

Plans

Start free. Upgrade when you need more.

A loader that reacts when work finishes needs the .riv, and a loader over page content needs transparent WebM or MOV: both are in every paid plan, from Starter ($20/month). Every set also has the loop as MP4 and GIF on a solid background. Prices in USD; tax is calculated at checkout by Creem.