Runway LoaderAn airplane taxis down a runway progress bar, nose tilting up and taking off at 100%.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About Runway Loader

Runway Loader is a progress bar with an airplane taxiing along it: as the load advances the plane rolls forward, and at 100% the nose lifts and it takes off. Motion handles both the linear taxi and the rotation-on-liftoff so the whole sequence reads as one continuous gesture. It is a lighthearted choice for onboarding flows, file imports, deploy pipelines, or any wait that benefits from a small narrative payoff at the end.

Built with

Frequently asked questions

Is Runway Loader free to use?

Yes. Runway Loader is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Runway Loader?

One command: npx shadcn@latest add https://aicanvas.me/r/runway-loader.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Runway Loader for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Runway Loader built with?

Runway Loader is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Runway Loader?

Common uses include Onboarding, Loading state, and Empty state. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Runway Loader with AI?

Yes. Runway Loader ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections