Ai Loader

Renders AI waiting indicators with dots, bar, or grid. Animates smoothly with shared cycle length. Shows elapsed time when enabled. Use for loading states requiring a consistent, non-deterministic visual cue.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ai-loader

npx layro-cli add @educlopez/ai-loader

npx layro-cli add @educlopez/ai-loader

bunx layro-cli add @educlopez/ai-loader

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useAnimationFrame, useReducedMotion } from "motion/react";
import { useRef, useState } from "react";

/**
 * One cycle length for every variant.
 *
 * Two loaders on the same screen running at different tempos read as two
 * unrelated things loading. Sharing the cycle makes them feel like one system
 * working, which is the whole point of a loader family.
 */
export const AI_LOADER_CYCLE_SECONDS = 1.2;