A colour per state: a status tile

The tile spins while something is working, then turns green with a check, amber with an exclamation mark or red with a cross. Fire done, warn or fail under the player; click the tile to start over. The sample comp is Status tile (folder Interactive examples).

Loading the player…

Live · dotlottie-webDownload .lottie

How it works

The animation itself draws only white icons on a transparent background. The colour behind them comes from the state: every state of the machine names a background colour, and the player paints it for as long as the state runs.

State	Segment	Background	How you get there
busy	busy (loops)	slate	at the start, and on a click from any result
ok	ok	green	the page fires done
warn	warn	amber	the page fires warn
fail	fail	red	the page fires fail

done, warn and fail sit on the listener, so they work from any state, because a check can still turn into an error. A click fires retry, which only the three result states listen to.

A state's background is one colour behind the whole canvas. It suits tiles, badges and full-bleed cards; for a shape with rounded corners or a shadow, colour the shape itself with a theme instead.

In After Effects

1. Markers busy, ok, warn, fail: one segment each; keep the comp background transparent and draw the icons in white.
2. Interactive Studio: a state per marker (the Click → segment template is a quick start), events done, warn, fail on the listener.
3. Pick a state; in its settings, Background takes a colour. No colour means transparent.

On a web page

// the version these pages use
import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/+esm";

const tile = new DotLottie({ canvas: document.querySelector("#status"), src: "status-tile.lottie", autoplay: true });
tile.addEventListener("load", () => {
  tile.stateMachineLoad("status");
  tile.stateMachineStart();
});

async function upload(file) {
  try {
    const res = await fetch("/upload", { method: "POST", body: file });
    tile.stateMachineFireEvent(res.ok ? "done" : "warn");
  } catch {
    tile.stateMachineFireEvent("fail");
  }
}

Variations

• A build or deploy badge: queued / running / passed / failed.
• A form field: neutral, focused, valid, invalid: the colour says it before the text does.
• A connection dot: online / reconnecting / offline.