Spin Loader

Four loading spinners in one component: a turning ring, three bouncing dots, a row of rising bars, and a pulse that spreads outward. They share one loop, mount their views once so the animation never restarts, and stand still when motion is reduced. Each reads out as a busy progress bar with your label. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add spin-loader

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/spin-loader.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { SpinLoader } from "@/components/ui/spin-loader";

export default function Example() {
  return <SpinLoader variant="dots" size={36} label="Loading messages" />;
}

Props