Spinner

A loading spinner that rotates continuously. It adapts to motion preferences and reduces animation when needed. It is used to indicate loading states in interfaces.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/spinner

npx layro-cli add @educlopez/spinner

npx layro-cli add @educlopez/spinner

bunx layro-cli add @educlopez/spinner

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

Code

Dependencies

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { type ComponentProps, useCallback, useRef } from "react";
import {
  EASE_LINEAR,
  LOOP_CLASS,
  LOOP_REPEAT_DELAY,
  loopTransition,
  useLoopInView,
} from "@/components/smoothui/lib/animation";

export type SpinnerSize = "sm" | "md" | "lg";