Loader

A status card that waits, then ends one of two ways: a spinner turns while the line says what is happening, then it closes into a ring with a check, or turns into a cross with a shake. In a page, your code sets the state when the work finishes.

ui/loader
UI
callout
Overlay with alpha
3.6 s (3.6–3.6 s)

Loader at 16:9 — Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop. The graphic is transparent; the grey stands in for your footage.

Try it live

In a page it is a live element: each state plays its stretch of the timeline, and hover and click switch them. Your code sets the rest with player.state. See Interactive states.

Loader

Your code decides how it ends.

state: …

<script type="module" src="https://cdn.jsdelivr.net/npm/volito/dist/player.js"></script>
<volito-player item="ui/loader" aspect="1000x500" ground="none" props='{"loading":"Uploading your video"}'></volito-player>

State	Plays	Then
`enter`	once	`loading`
`loading`	loop	stays
`success`	once	stays
`failure`	once	stays

Page events: click(success|failure): loading

Render it

npx volito render ui/loader --prop loading="Uploading your video" --prop success="Uploaded" --out loader.mov

That writes ProRes 4444 with alpha, ready to drop over footage. The same item in another shape, brand or format:

volito render ui/loader --aspect 9:16 --style cobalt --out loader-9x16.mov
volito render ui/loader --format mp4 --out loader.mp4
volito still ui/loader --t 1.8 --out loader.png
volito info ui/loader     # every prop and part
volito add ui/loader      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("ui/loader"), { props: { loading: "Uploading your video", success: "Uploaded" }, out: "loader.mov" });

Or ask an agent with the MCP server connected: “Render the Volito loader (ui/loader) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

Prop	Type	Default	Takes
`loading` While it works	text	Uploading your video	≤ 32 chars
`success` When it works	text	Uploaded	≤ 32 chars
`failure` When it fails	text	Upload failed — try again	≤ 32 chars

Tags: ui, loader, spinner, loading, progress, success, error, status, interactive, micro-interaction, web

More in UI

Button

A product button with every state: it springs in, breathes while idle, lifts on hover, presses, spins while it loads and lands on a check with the done label. In a page, <volito-player> plays each state on hover and click.

Toggle

A settings switch with its label: the knob stretches as it slides, the track fills with the accent, and it slides back. In a page, a click turns it on and off.

Like

A heart and its count: it breathes while idle, pops full with a burst when liked as the count rolls up by one, and empties again when unliked. In a page, a click likes and unlikes.

Notification bell

A bell that rings: it swings on its hook, a badge pops in with the count, and it clears when read. In a page, hovering rings it and a click marks it read.