Loader

1"use client";
2// beui.dev/components/motion/loader
3 
4import { motion, useReducedMotion } from "motion/react";
5import { useEffect, useId, useState } from "react";
6import { EASE_IN_OUT } from "@/lib/ease";
7import { cn } from "@/lib/utils";
8 
9export type LoaderVariant =
10  | "spinner"
11  | "dots"
12  | "bars"
13  | "dot-matrix"
14  | "dither"
15  | "ascii"
16  | "ascii-line"
17  | "ascii-braille"
18  | "ascii-blocks"
19  | "ascii-bounce"
20  | "morph"
21  | "comet"
22  | "scramble"
23  | "metaballs"
24  | "newton"
25  | "helix"
26  | "percent";
27 
28// Terminal-style frame sets — the loaders CLI AI agents cycle through.
29const ASCII_SETS: Record<string, string[]> = {
30  ascii: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
31  "ascii-line": ["|", "/", "-", "\\"],
32  "ascii-braille": ["⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣷"],
33  "ascii-blocks": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█", "▇", "▆", "▅", "▄", "▃", "▂"],
34  "ascii-bounce": ["⠁", "⠂", "⠄", "⡀", "⢀", "⠠", "⠐", "⠈"],
35};
36 
37export interface LoaderProps {
38  /** Which animation to render. */
39  variant?: LoaderVariant;
40  /** Base square size in px. Everything scales from this. */
41  size?: number;
42  /** Seconds per animation cycle. */
43  speed?: number;
44  /** Accessible label announced to screen readers. */
45  label?: string;
46  className?: string;
47}
48 
49// Reduced motion keeps a calm opacity pulse and drops every transform.
50const REDUCED = {
51  animate: { opacity: [1, 0.4, 1] },
52  transition: { duration: 1.4, ease: EASE_IN_OUT, repeat: Infinity },
53};
54 
55export function Loader({
56  variant = "spinner",
57  size = 32,
58  speed = 1,
59  label = "Loading",
60  className,
61}: LoaderProps) {
62  const reduce = useReducedMotion() ?? false;
63 
64  return (
65    <span
66      role="status"
67      aria-label={label}
68      className={cn(
69        "inline-flex items-center justify-center text-foreground",
70        className,
71      )}
72    >
73      {variant === "spinner" && <Spinner size={size} speed={speed} reduce={reduce} />}
74      {variant === "dots" && <Dots size={size} speed={speed} reduce={reduce} />}
75      {variant === "bars" && <Bars size={size} speed={speed} reduce={reduce} />}
76      {variant === "dot-matrix" && (
77        <DotMatrix size={size} speed={speed} reduce={reduce} />
78      )}
79      {variant === "dither" && <Dither size={size} speed={speed} reduce={reduce} />}
80      {ASCII_SETS[variant] && (
81        <Ascii frames={ASCII_SETS[variant]} size={size} speed={speed} reduce={reduce} />
82      )}
83// … truncated