Motion Loader

Renders animated loaders with various motion effects. Behaves by cycling through predefined animations based on variant and speed settings. Use when needing visual feedback during loading states.

byEdu Calvo from Smoothui

Installation

terminal

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

npx layro-cli add @educlopez/motion-loader

npx layro-cli add @educlopez/motion-loader

bunx layro-cli add @educlopez/motion-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, useReducedMotion } from "motion/react";
import type { CSSProperties, ReactElement } from "react";

/* -------------------------------------------------------------------------- */
/* Public types                                                               */
/* -------------------------------------------------------------------------- */

export const MOTION_LOADER_VARIANTS = [
  "orbit",
  "newton-cradle",
  "pendulum",