2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:Te16,"use client"; import { Button } from "@/components/ui/button"; import { DemoCell, DemoGrid, DemoPage, DemoSection } from "../../_shared/variant-frame"; import { Loader } from "./loaders"; const loaderNames = [ "arc", "atom", "blocks", "bouncing-dots", "cascade", "circular-dots", "classic", "classic-v2", "clock", "comet", "compass", "dual", "eclipse", "flip", "gather", "leap", "linear-dots", "loading", "morph", "orbit", "pulse", "radar", "ring", "ripple", "slide", "snake", "swirl", "trace", "wave", ] as const; function displayName(name: string) { return name.replaceAll("-", " "); } export function LoadersDemo() { return ( {loaderNames.map((name) => (

{displayName(name)}

))}

); } export default LoadersDemo; 31:Td80,import type { BlockMeta } from "../../../lib/block-meta"; export const loadersMeta: BlockMeta = { slug: "loaders", title: "Loaders", description: "Twenty-nine copy-installable loading indicators with shared size, color, duration, playback, and spinner-specific controls.", group: "feedback", kobraDeps: ["button"], files: [ "blocks/feedback/loaders/loaders.tsx", "blocks/feedback/loaders/demo.tsx", "blocks/feedback/loaders/meta.ts", "blocks/feedback/loaders/lib/arc.tsx", "blocks/feedback/loaders/lib/atom.tsx", "blocks/feedback/loaders/lib/blocks.tsx", "blocks/feedback/loaders/lib/bouncing-dots.tsx", "blocks/feedback/loaders/lib/cap.ts", "blocks/feedback/loaders/lib/cascade.tsx", "blocks/feedback/loaders/lib/circular-dots.tsx", "blocks/feedback/loaders/lib/classic-v2.tsx", "blocks/feedback/loaders/lib/classic.tsx", "blocks/feedback/loaders/lib/clock.tsx", "blocks/feedback/loaders/lib/comet.tsx", "blocks/feedback/loaders/lib/compass.tsx", "blocks/feedback/loaders/lib/dual.tsx", "blocks/feedback/loaders/lib/easing.ts", "blocks/feedback/loaders/lib/eclipse.tsx", "blocks/feedback/loaders/lib/fade.ts", "blocks/feedback/loaders/lib/flip.tsx", "blocks/feedback/loaders/lib/frame.tsx", "blocks/feedback/loaders/lib/gather.tsx", "blocks/feedback/loaders/lib/index.ts", "blocks/feedback/loaders/lib/leap.tsx", "blocks/feedback/loaders/lib/linear-dots.tsx", "blocks/feedback/loaders/lib/loading.tsx", "blocks/feedback/loaders/lib/morph.tsx", "blocks/feedback/loaders/lib/motion.ts", "blocks/feedback/loaders/lib/orbit.tsx", "blocks/feedback/loaders/lib/pulse.tsx", "blocks/feedback/loaders/lib/radar.tsx", "blocks/feedback/loaders/lib/ring.tsx", "blocks/feedback/loaders/lib/ripple.tsx", "blocks/feedback/loaders/lib/slide.tsx", "blocks/feedback/loaders/lib/snake.tsx", "blocks/feedback/loaders/lib/spinners.ts", "blocks/feedback/loaders/lib/swirl.tsx", "blocks/feedback/loaders/lib/trace.tsx", "blocks/feedback/loaders/lib/types.ts", "blocks/feedback/loaders/lib/wave.tsx", ], props: [ { name: "name", type: "SpinnerName", description: "Select one of the 29 named loading indicators." }, { name: "size", type: "number", default: "20", description: "Rendered size in pixels." }, { name: "color", type: "string", default: "currentColor", description: "Spinner color; defaults to its inherited text color." }, { name: "duration", type: "number", description: "Animation duration in milliseconds." }, { name: "playState", type: "'paused' | 'running'", description: "Pause or resume the animation." }, { name: "label", type: "string", description: "Visually hidden status announcement for assistive technology." }, { name: "easing", type: "Easing", description: "Rotation easing on supported spinners." }, { name: "cap", type: "'flat' | 'round'", description: "Stroke cap on supported spinners." }, { name: "sweep", type: "'columns' | 'diagonal' | 'rows'", description: "Block sweep direction." }, { name: "direction", type: "'in' | 'out'", description: "Ripple direction." }, { name: "origin", type: "'bottom' | 'center'", description: "Wave origin." }, ], tags: ["loading", "spinner", "progress", "feedback"], status: "ready", origin: { name: "loading.dev", url: "https://github.com/jakubkrehel/loading", license: "MIT" }, }; 32:T76f,import { type EasingProps, rotationCss, spinClass } from "./easing"; import { cssVars, SpinnerStyle, spinnerRoot, step } from "./frame"; import { SIZE, stagger } from "./motion"; import type { SpinnerProps } from "./types"; export interface AtomProps extends SpinnerProps, EasingProps {} const ORBITS = Array.from({ length: 3 }, (_, index) => index); const TILT = 180 / ORBITS.length; const STROKE = `calc(${SIZE} * 0.055)`; const INNER_STROKE = `calc(${SIZE} * 0.045)`; const css = ` .ld-atom { position: relative; width: ${SIZE}; height: ${SIZE}; } .ld-atom-shell { position: absolute; inset: 0; box-sizing: border-box; border: ${STROKE} solid currentColor; border-radius: 9999px; } .ld-atom-orbit { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotate(var(--ld-atom-tilt)) rotateX(90deg); } .ld-atom-ring { position: absolute; inset: 0; box-sizing: border-box; border: ${INNER_STROKE} solid currentColor; border-radius: 9999px; transform: rotateX(90deg); } ${rotationCss("atom")} .ld-atom-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation-delay: ${stagger("atom", ORBITS.length)}; } @media (prefers-reduced-motion: reduce) { .ld-atom-spin { transform: rotate(${TILT}deg); } } `; export function Atom({ easing, ...rest }: AtomProps) { return ( <> {css}

{ORBITS.map((index) => (

))}

); } 33:T7fb,import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, stagger } from "./motion"; import type { SpinnerProps } from "./types"; export type BlocksSweep = "columns" | "diagonal" | "rows"; export const DEFAULT_BLOCKS_SWEEP: BlocksSweep = "diagonal"; export interface BlocksProps extends SpinnerProps { sweep?: BlocksSweep; } const SIDE = 3; interface Cell { col: number; row: number; } const CELLS: Cell[] = Array.from({ length: SIDE * SIDE }, (_, index) => ({ col: index % SIDE, row: Math.floor(index / SIDE), })); const SWEEPS: Record< BlocksSweep, { count: number; place: (cell: Cell) => number } > = { columns: { count: SIDE, place: ({ col }) => col }, diagonal: { count: SIDE * 2 - 1, place: ({ col, row }) => row + col }, rows: { count: SIDE, place: ({ row }) => row }, }; const css = ` .ld-blocks { display: grid; grid-template-columns: repeat(${SIDE}, 1fr); grid-template-rows: repeat(${SIDE}, 1fr); gap: calc(${SIZE} * 0.1); width: ${SIZE}; height: ${SIZE}; } .ld-blocks-cell { background: currentColor; border-radius: calc(${SIZE} * 0.0625); ${animation("blocks", "ld-blocks-sweep", "ease-in-out")} } ${Object.entries(SWEEPS) .map( ([sweep, { count }]) => ` .ld-blocks-cell-${sweep} { animation-delay: ${stagger("blocks", count)}; } ` ) .join("")} @keyframes ld-blocks-sweep { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(0); } } @media (prefers-reduced-motion: reduce) { .ld-blocks-cell { transform: scale(0.8); } } `; export function Blocks({ sweep = DEFAULT_BLOCKS_SWEEP, ...rest }: BlocksProps) { const { place } = SWEEPS[sweep]; return ( <> {css}

{CELLS.map((cell) => (

))}

); } 34:T449,import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, stagger } from "./motion"; import type { SpinnerProps } from "./types"; const DOTS = Array.from({ length: 3 }, (_, index) => index); const css = ` .ld-bouncing-dots { display: flex; align-items: center; gap: calc(${SIZE} * 0.2); height: ${SIZE}; } .ld-bouncing-dots-dot { width: calc(${SIZE} * 0.25); height: calc(${SIZE} * 0.25); background: currentColor; border-radius: 9999px; ${animation("bouncing-dots", "ld-bouncing-dots-bounce", "ease-in-out alternate")} animation-delay: ${stagger("bouncing-dots", DOTS.length)}; } @keyframes ld-bouncing-dots-bounce { from { transform: translateY(28%); } to { transform: translateY(-72%); } } `; export function BouncingDots(props: SpinnerProps) { return ( <> {css}

{DOTS.map((dot) => (

))}

); } 35:T5a5,import { type CapProps, linecap } from "./cap"; import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, stagger } from "./motion"; import type { SpinnerProps } from "./types"; export interface CascadeProps extends SpinnerProps, CapProps {} const RADII = [10.5, 7, 3.5]; const SLOTS = 24; const css = ` .ld-cascade { width: ${SIZE}; height: ${SIZE}; } .ld-cascade-arc { transform-origin: center; ${animation("cascade", "ld-cascade-turn", "cubic-bezier(0.68, -0.75, 0.265, 1.75)")} animation-delay: ${stagger("cascade", SLOTS)}; } @keyframes ld-cascade-turn { to { transform: rotate(360deg); } } `; export function Cascade({ cap, ...rest }: CascadeProps) { return ( <> {css} ); } 36:T41a,import { fadeCss } from "./fade"; import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; const DOTS = [ [8, 1.5], [12.5962, 3.4038], [14.5, 8], [12.5962, 12.5962], [8, 14.5], [3.4038, 12.5962], [1.5, 8], [3.4038, 3.4038], ] as const; const css = ` .ld-circular-dots { width: ${SIZE}; height: ${SIZE}; } ${fadeCss("circular-dots", "dot", DOTS.length, { dim: 0.2, rest: 0.6 })} `; export function CircularDots(props: SpinnerProps) { return ( <> {css} ); } 37:Ta65,import { fadeCss } from "./fade"; import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; const TICKS = [ "M7.33334 0.666667C7.33334 0.298477 7.63181 0 8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V3.33333C8.66667 3.70152 8.36819 4 8 4C7.63181 4 7.33334 3.70152 7.33334 3.33333V0.666667Z", "M11.7712 5.17154C11.5109 5.43189 11.0888 5.43189 10.8284 5.17154C10.5681 4.91119 10.5681 4.48908 10.8284 4.22873L12.714 2.34311C12.9744 2.08276 13.3965 2.08276 13.6568 2.34311C13.9172 2.60346 13.9172 3.02557 13.6568 3.28592L11.7712 5.17154Z", "M12.6667 8.66667C12.2985 8.66667 12 8.36819 12 8.00001C12 7.63182 12.2985 7.33334 12.6667 7.33334H15.3333C15.7015 7.33334 16 7.63182 16 8.00001C16 8.36819 15.7015 8.66667 15.3333 8.66667H12.6667Z", "M10.8284 11.7713C10.5681 11.5109 10.5681 11.0888 10.8284 10.8284C11.0888 10.5681 11.5109 10.5681 11.7712 10.8284L13.6568 12.7141C13.9172 12.9744 13.9172 13.3965 13.6568 13.6569C13.3965 13.9172 12.9744 13.9172 12.714 13.6569L10.8284 11.7713Z", "M7.33333 12.6667C7.33333 12.2985 7.63181 12 8 12C8.36819 12 8.66667 12.2985 8.66667 12.6667V15.3333C8.66667 15.7015 8.36819 16 8 16C7.63181 16 7.33333 15.7015 7.33333 15.3333V12.6667Z", "M3.28594 13.6569C3.02559 13.9172 2.60348 13.9172 2.34313 13.6569C2.08278 13.3965 2.08278 12.9744 2.34313 12.714L4.22875 10.8284C4.4891 10.5681 4.91121 10.5681 5.17156 10.8284C5.43191 11.0888 5.43191 11.5109 5.17156 11.7712L3.28594 13.6569Z", "M0.666667 8.66667C0.298477 8.66667 1.60941e-08 8.36819 0 8.00001C-1.60941e-08 7.63182 0.298477 7.33334 0.666667 7.33334H3.33333C3.70152 7.33334 4 7.63182 4 8.00001C4 8.36819 3.70152 8.66667 3.33333 8.66667H0.666667Z", "M2.34315 3.28594C2.0828 3.02559 2.0828 2.60348 2.34315 2.34314C2.6035 2.08279 3.02561 2.08279 3.28596 2.34313L5.17158 4.22875C5.43193 4.4891 5.43193 4.91121 5.17158 5.17156C4.91123 5.43191 4.48912 5.43191 4.22877 5.17156L2.34315 3.28594Z", ]; const css = ` .ld-classic-v2 { width: ${SIZE}; height: ${SIZE}; } ${fadeCss("classic-v2", "tick", TICKS.length, { dim: 0.4, rest: 0.5 })} `; export function ClassicV2(props: SpinnerProps) { return ( <> {css} ); } 38:T43c,import { fadeCss } from "./fade"; import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { SIZE, STEP_VAR } from "./motion"; import type { SpinnerProps } from "./types"; const BARS = Array.from({ length: 12 }, (_, index) => index); const css = ` .ld-classic { width: ${SIZE}; height: ${SIZE}; } .ld-classic-inner { position: relative; top: 50%; left: 50%; width: ${SIZE}; height: ${SIZE}; } .ld-classic-bar { position: absolute; top: -3.9%; left: -10%; width: 24%; height: 8%; background: currentColor; border-radius: 6px; transform: rotate(calc(var(${STEP_VAR}) * 30deg)) translate(146%); } ${fadeCss("classic", "bar", BARS.length, { dim: 0.15, rest: 0.5 })} `; export function Classic(props: SpinnerProps) { return ( <> {css}

{BARS.map((bar) => (

))}

); } 39:T4ab,import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface ClockProps extends SpinnerProps, EasingProps {} const css = ` .ld-clock { width: ${SIZE}; height: ${SIZE}; } ${rotationCss("clock")} `; export function Clock({ easing, ...rest }: ClockProps) { return ( <> {css} ); } 3a:T57a,import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface CometProps extends SpinnerProps, EasingProps {} const css = ` .ld-comet { --ld-comet-stroke: calc(${SIZE} * 0.12); position: relative; width: ${SIZE}; height: ${SIZE}; } .ld-comet-spin { position: absolute; inset: 0; } .ld-comet-tail { position: absolute; inset: 0; border-radius: 9999px; background: conic-gradient(from 0deg, transparent, currentColor); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-comet-stroke)), #000 0); } .ld-comet-head { position: absolute; top: 0; left: 50%; width: var(--ld-comet-stroke); height: var(--ld-comet-stroke); background: currentColor; border-radius: 9999px; transform: translateX(-50%); } ${rotationCss("comet")} `; export function Comet({ easing, ...rest }: CometProps) { return ( <> {css}

); } 3b:T65a,import { SpinnerStyle, spinnerRoot } from "./frame"; import { animation, SIZE } from "./motion"; import type { SpinnerProps } from "./types"; const css = ` .ld-compass { width: ${SIZE}; height: ${SIZE}; } .ld-compass-ticks { transform-origin: center; ${animation("compass", "ld-compass-turn", "ease-in-out")} } @keyframes ld-compass-turn { to { transform: rotate(90deg); } } `; export function Compass(props: SpinnerProps) { return ( <> {css} ); } 3c:T515,import { type CapProps, linecap } from "./cap"; import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface DualProps extends SpinnerProps, EasingProps, CapProps {} const css = ` .ld-dual { width: ${SIZE}; height: ${SIZE}; } ${rotationCss("dual")} .ld-dual-inner { animation-direction: reverse; } @media (prefers-reduced-motion: reduce) { .ld-dual-inner { transform: rotate(180deg); } } `; export function Dual({ cap, easing, ...rest }: DualProps) { return ( <> {css} ); } 3d:T512,import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, STEP_VAR, stagger } from "./motion"; import type { SpinnerProps } from "./types"; const DOTS = [0, 1]; const css = ` .ld-eclipse { position: relative; width: ${SIZE}; height: ${SIZE}; } .ld-eclipse-dot { position: absolute; top: 30%; left: 30%; width: 40%; height: 40%; background: currentColor; border-radius: 50%; ${animation("eclipse", ["ld-eclipse-slide", "ld-eclipse-depth"], "ease-in-out")} animation-delay: ${stagger("eclipse", DOTS.length)}; } @keyframes ld-eclipse-slide { 0%, 100% { translate: 75% 0; } 50% { translate: -75% 0; } } @keyframes ld-eclipse-depth { 0%, 50%, 100% { opacity: 0.75; scale: 1; } 25% { opacity: 1; scale: 1.3; } 75% { opacity: 0.5; scale: 0.7; } } @media (prefers-reduced-motion: reduce) { .ld-eclipse-dot { translate: calc(var(${STEP_VAR}) * 150% - 75%) 0; } } `; export function Eclipse(props: SpinnerProps) { return ( <> {css}

{DOTS.map((index) => (

))}

); } 3e:T4f1,import type { CSSProperties } from "react"; import { DEFAULT_SIZE, DURATION_VAR, PLAY_STATE_VAR, SIZE_VAR, type SpinnerName, STEP_VAR, } from "./motion"; import type { SpinnerProps } from "./types"; export function SpinnerStyle({ children, name, }: { children: string; name: SpinnerName; }) { return ( ); } export function cssVars( vars: CSSProperties & Record<`--ld-${string}`, number | string> ): CSSProperties { return vars; } export function step(index: number): CSSProperties { return cssVars({ [STEP_VAR]: index }); } export function spinnerRoot( name: SpinnerName, { className, color, duration, playState, size = DEFAULT_SIZE }: SpinnerProps ) { return { "aria-hidden": true, className: [`ld-${name}`, className].filter(Boolean).join(" "), style: cssVars({ [SIZE_VAR]: `${size}px`, ...(color === undefined ? null : { color }), ...(duration === undefined ? null : { [DURATION_VAR]: `${duration}ms` }), ...(playState === undefined ? null : { [PLAY_STATE_VAR]: playState }), }), }; } 3f:T644,import { cssVars, SpinnerStyle, spinnerRoot } from "./frame"; import { animation, SIZE } from "./motion"; import type { SpinnerProps } from "./types"; const BLOCKS = [ { x: 1, y: 1 }, { x: -1, y: 1 }, { x: 1, y: -1 }, { x: -1, y: -1 }, ]; const GAP = 24; const GAP_IN = 8; const BLOCK = (100 - GAP) / 2; const PULL = `${(((GAP - GAP_IN) / 2 / BLOCK) * 100).toFixed(1)}%`; const css = ` .ld-gather { width: ${SIZE}; height: ${SIZE}; } .ld-gather-group { display: grid; grid-template-columns: 1fr 1fr; gap: ${GAP}%; width: 100%; height: 100%; ${animation("gather", "ld-gather-turn", "ease-in-out")} } .ld-gather-block { background: currentColor; border-radius: calc(${SIZE} * 0.14); ${animation("gather", "ld-gather-pull", "ease-in-out")} } @keyframes ld-gather-pull { 0%, 100% { transform: translate(0, 0); } 30%, 60% { transform: translate( calc(var(--ld-gather-x) * ${PULL}), calc(var(--ld-gather-y) * ${PULL}) ); } } @keyframes ld-gather-turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } } `; export function Gather(props: SpinnerProps) { return ( <> {css}

{BLOCKS.map(({ x, y }) => (

))}

); } 40:T72b,/** * MIT License * Copyright (c) 2026 Jakub Krehel * Source: https://github.com/jakubkrehel/loading */ export { Arc, type ArcProps } from "./arc"; export { Atom, type AtomProps } from "./atom"; export { Blocks, type BlocksProps, type BlocksSweep, DEFAULT_BLOCKS_SWEEP, } from "./blocks"; export { BouncingDots } from "./bouncing-dots"; export { type Cap, type CapProps, DEFAULT_CAP } from "./cap"; export { Cascade, type CascadeProps } from "./cascade"; export { CircularDots } from "./circular-dots"; export { Classic } from "./classic"; export { ClassicV2 } from "./classic-v2"; export { Clock, type ClockProps } from "./clock"; export { Comet, type CometProps } from "./comet"; export { Compass } from "./compass"; export { Dual, type DualProps } from "./dual"; export { DEFAULT_EASING, type Easing, type EasingProps } from "./easing"; export { Eclipse } from "./eclipse"; export { Flip } from "./flip"; export { Gather } from "./gather"; export { Leap } from "./leap"; export { LinearDots } from "./linear-dots"; export { Loading } from "./loading"; export { Morph } from "./morph"; export { DURATION_VAR, PLAY_STATE_VAR, SPINNER_MOTION, type SpinnerName, } from "./motion"; export { Orbit, type OrbitProps } from "./orbit"; export { Pulse } from "./pulse"; export { Radar, type RadarProps } from "./radar"; export { Ring, type RingProps } from "./ring"; export { DEFAULT_RIPPLE_DIRECTION, Ripple, type RippleDirection, type RippleProps, } from "./ripple"; export { Slide } from "./slide"; export { Snake, type SnakeProps } from "./snake"; export { SPINNERS } from "./spinners"; export { Swirl } from "./swirl"; export { Trace, type TraceProps } from "./trace"; export type { SpinnerProps } from "./types"; export { DEFAULT_WAVE_ORIGIN, Wave, type WaveOrigin, type WaveProps, } from "./wave"; 41:T6f3,import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, STEP_VAR, stagger } from "./motion"; import type { SpinnerProps } from "./types"; const DOTS = Array.from({ length: 3 }, (_, index) => index); const css = ` .ld-leap { --ld-leap-dot: round(calc(${SIZE} * 0.22), 1px); --ld-leap-gap: round(down, calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px); position: relative; width: ${SIZE}; height: ${SIZE}; } .ld-leap-wrapper { position: absolute; top: round(calc((${SIZE} - var(--ld-leap-dot)) / 2), 1px); left: calc(${SIZE} - var(--ld-leap-dot) - var(--ld-leap-gap) * 2); width: calc(var(--ld-leap-gap) * 2 + var(--ld-leap-dot)); height: var(--ld-leap-dot); ${animation("leap", "ld-leap-hop", "ease-in-out")} animation-delay: ${stagger("leap", DOTS.length)}; } .ld-leap-dot { position: absolute; inset: 0 auto 0 0; width: var(--ld-leap-dot); background: currentColor; border-radius: 50%; } @keyframes ld-leap-hop { 0% { transform: translateX(0) rotate(0); } 33.33% { transform: translateX(0) rotate(180deg); } 66.66% { transform: translateX(calc(var(--ld-leap-gap) * -1)) rotate(180deg); } 100% { transform: translateX(calc(var(--ld-leap-gap) * -2)) rotate(180deg); } } @media (prefers-reduced-motion: reduce) { .ld-leap-wrapper { transform: translateX(calc(var(${STEP_VAR}) * var(--ld-leap-gap))); } } `; export function Leap(props: SpinnerProps) { return ( <> {css}

{DOTS.map((index) => (

))}

); } 42:T485,import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, stagger } from "./motion"; import type { SpinnerProps } from "./types"; const DOTS = Array.from({ length: 3 }, (_, index) => index); const css = ` .ld-linear-dots { display: flex; align-items: center; gap: calc(${SIZE} * 0.1875); height: ${SIZE}; } .ld-linear-dots-dot { width: calc(${SIZE} * 0.1875); height: calc(${SIZE} * 0.1875); background: currentColor; border-radius: 9999px; ${animation("linear-dots", "ld-linear-dots-fade", "linear")} animation-delay: ${stagger("linear-dots", DOTS.length)}; } @keyframes ld-linear-dots-fade { 0% { opacity: 1; } 66.67% { opacity: 0.5; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ld-linear-dots-dot { opacity: 0.75; } } `; export function LinearDots(props: SpinnerProps) { return ( <> {css}

{DOTS.map((dot) => (

))}

); } 43:T45a,import { fadeCss } from "./fade"; import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; const BLOCK = "M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z"; const SEGMENTS = [ { x: 12, y: 6 }, { x: 10, y: 10 }, { x: 6, y: 12 }, { x: 2, y: 10 }, { x: 0, y: 6 }, { x: 2, y: 2 }, { x: 6, y: 0 }, { x: 10, y: 2 }, ]; const css = ` .ld-loading { width: ${SIZE}; height: ${SIZE}; } ${fadeCss("loading", "segment", SEGMENTS.length, { dim: 0.2, rest: 0.6 })} `; export function Loading(props: SpinnerProps) { return ( <> {css} ); } 44:T5d9,export const DURATION_VAR = "--ld-duration"; export const PLAY_STATE_VAR = "--ld-play-state"; export const SIZE_VAR = "--ld-size"; export const STEP_VAR = "--ld-step"; export const DEFAULT_SIZE = 20; export const SIZE = `var(${SIZE_VAR}, ${DEFAULT_SIZE}px)`; export const SPINNER_MOTION = { arc: 800, atom: 1000, blocks: 1300, "bouncing-dots": 500, cascade: 1500, "circular-dots": 800, classic: 1200, "classic-v2": 800, clock: 1200, comet: 700, compass: 500, dual: 1000, eclipse: 1200, flip: 1200, gather: 1600, leap: 1800, "linear-dots": 900, loading: 1000, morph: 1200, orbit: 750, pulse: 1200, radar: 1500, ring: 800, ripple: 1200, slide: 2400, snake: 1400, swirl: 1200, trace: 1200, wave: 900, } as const satisfies Record; export type SpinnerName = keyof typeof SPINNER_MOTION; export function duration(name: SpinnerName): string { return `var(${DURATION_VAR}, ${SPINNER_MOTION[name]}ms)`; } export function stagger(name: SpinnerName, count: number): string { return `calc(${duration(name)} * (var(${STEP_VAR}) - ${count}) / ${count})`; } export const PLAY_STATE = `var(${PLAY_STATE_VAR}, running)`; export function animation( name: SpinnerName, keyframes: string | string[], timing: string ): string { const runs = [keyframes] .flat() .map((frames) => `${frames} ${duration(name)} ${timing} infinite`); return `animation: ${runs.join(", ")}; animation-play-state: ${PLAY_STATE};`; } 45:T522,import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface OrbitProps extends SpinnerProps, EasingProps {} const css = ` .ld-orbit { --ld-orbit-stroke: calc(${SIZE} * 0.0625); position: relative; width: ${SIZE}; height: ${SIZE}; } .ld-orbit-track { position: absolute; inset: 8%; border-radius: 9999px; background: conic-gradient(from 180deg, transparent 0deg, currentColor 180deg, transparent 180deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-orbit-stroke)), #000 0); } .ld-orbit-dot { position: absolute; top: 50%; left: 50%; width: 25%; height: 25%; background: currentColor; border-radius: 9999px; transform: translate(-50%, -50%); } ${rotationCss("orbit")} `; export function Orbit({ easing, ...rest }: OrbitProps) { return ( <> {css}

); } 46:T403,import { SpinnerStyle, spinnerRoot } from "./frame"; import { animation, SIZE } from "./motion"; import type { SpinnerProps } from "./types"; const css = ` .ld-pulse { width: ${SIZE}; height: ${SIZE}; } .ld-pulse-ring { transform-origin: center; ${animation("pulse", "ld-pulse-ripple", "ease-out")} } @keyframes ld-pulse-ripple { from { opacity: 0.4; transform: scale(0.25); } to { opacity: 0; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ld-pulse-ring { opacity: 0.2; } } `; export function Pulse(props: SpinnerProps) { return ( <> {css} ); } 47:T68f,import { useId } from "react"; import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface RadarProps extends SpinnerProps, EasingProps {} const css = ` .ld-radar { width: ${SIZE}; height: ${SIZE}; } ${rotationCss("radar")} `; export function Radar({ easing, ...rest }: RadarProps) { const beamGradient = useId(); return ( <> {css} ); } 48:T470,import { type CapProps, linecap } from "./cap"; import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface RingProps extends SpinnerProps, EasingProps, CapProps {} const css = ` .ld-ring { width: ${SIZE}; height: ${SIZE}; } ${rotationCss("ring")} `; export function Ring({ cap, easing, ...rest }: RingProps) { return ( <> {css} ); } 49:T628,import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, STEP_VAR, stagger } from "./motion"; import type { SpinnerProps } from "./types"; export type RippleDirection = "in" | "out"; export const DEFAULT_RIPPLE_DIRECTION: RippleDirection = "out"; export interface RippleProps extends SpinnerProps { direction?: RippleDirection; } const RINGS = Array.from({ length: 3 }, (_, index) => index); const css = ` .ld-ripple { position: relative; width: ${SIZE}; height: ${SIZE}; } .ld-ripple-ring { position: absolute; inset: 0; box-sizing: border-box; border: calc(${SIZE} * 0.08) solid currentColor; border-radius: 9999px; ${animation("ripple", "ld-ripple-spread", "ease-out")} animation-delay: ${stagger("ripple", RINGS.length)}; } .ld-ripple-ring-in { animation-direction: reverse; } @keyframes ld-ripple-spread { from { opacity: 1; transform: scale(0); } to { opacity: 0; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ld-ripple-ring { opacity: 0.4; transform: scale(calc((var(${STEP_VAR}) + 1) / ${RINGS.length})); } } `; export function Ripple({ direction = DEFAULT_RIPPLE_DIRECTION, ...rest }: RippleProps) { return ( <> {css}

{RINGS.map((index) => (

))}

); } 4a:T62f,import { cssVars, SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, stagger } from "./motion"; import type { SpinnerProps } from "./types"; const DOT = 34; const GAP = 20; const MARGIN = (100 - 2 * DOT - GAP) / 2; const FAR = `${(((DOT + GAP) / DOT) * 100).toFixed(1)}%`; const RESTS = [ `translate(${FAR}, 0)`, "translate(0, 0)", `translate(0, ${FAR})`, ]; const css = ` .ld-slide { position: relative; width: ${SIZE}; height: ${SIZE}; } .ld-slide-dot { position: absolute; top: ${MARGIN}%; left: ${MARGIN}%; width: ${DOT}%; height: ${DOT}%; background: currentColor; border-radius: 50%; ${animation("slide", "ld-slide-walk", "ease-in-out")} animation-delay: ${stagger("slide", RESTS.length)}; } @keyframes ld-slide-walk { 0% { transform: translate(${FAR}, 0); } 8.33%, 25% { transform: translate(${FAR}, ${FAR}); } 33.33%, 50% { transform: translate(0, ${FAR}); } 58.33%, 75% { transform: translate(0, 0); } 83.33%, 100% { transform: translate(${FAR}, 0); } } @media (prefers-reduced-motion: reduce) { .ld-slide-dot { transform: var(--ld-slide-rest); } } `; export function Slide(props: SpinnerProps) { return ( <> {css}

{RESTS.map((rest, index) => (

))}

); } 4b:T5a1,import { type CapProps, linecap } from "./cap"; import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { animation, SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface SnakeProps extends SpinnerProps, EasingProps, CapProps {} const css = ` .ld-snake { width: ${SIZE}; height: ${SIZE}; } ${rotationCss("snake")} .ld-snake-dash { ${animation("snake", "ld-snake-stretch", "ease-in-out")} } @keyframes ld-snake-stretch { 0% { stroke-dasharray: 1 100; stroke-dashoffset: 0; } 50% { stroke-dasharray: 45 100; stroke-dashoffset: -17; } 100% { stroke-dasharray: 45 100; stroke-dashoffset: -62; } } @media (prefers-reduced-motion: reduce) { .ld-snake-dash { stroke-dasharray: 18 100; } } `; export function Snake({ cap, easing, ...rest }: SnakeProps) { return ( <> {css} ); } 4c:T6ec,import type { ComponentType } from "react"; import { Arc } from "./arc"; import { Atom } from "./atom"; import { Blocks } from "./blocks"; import { BouncingDots } from "./bouncing-dots"; import { Cascade } from "./cascade"; import { CircularDots } from "./circular-dots"; import { Classic } from "./classic"; import { ClassicV2 } from "./classic-v2"; import { Clock } from "./clock"; import { Comet } from "./comet"; import { Compass } from "./compass"; import { Dual } from "./dual"; import { Eclipse } from "./eclipse"; import { Flip } from "./flip"; import { Gather } from "./gather"; import { Leap } from "./leap"; import { LinearDots } from "./linear-dots"; import { Loading } from "./loading"; import { Morph } from "./morph"; import type { SpinnerName } from "./motion"; import { Orbit } from "./orbit"; import { Pulse } from "./pulse"; import { Radar } from "./radar"; import { Ring } from "./ring"; import { Ripple } from "./ripple"; import { Slide } from "./slide"; import { Snake } from "./snake"; import { Swirl } from "./swirl"; import { Trace } from "./trace"; import type { SpinnerProps } from "./types"; import { Wave } from "./wave"; export const SPINNERS = { arc: Arc, atom: Atom, blocks: Blocks, "bouncing-dots": BouncingDots, cascade: Cascade, "circular-dots": CircularDots, classic: Classic, "classic-v2": ClassicV2, clock: Clock, comet: Comet, compass: Compass, dual: Dual, eclipse: Eclipse, flip: Flip, gather: Gather, leap: Leap, "linear-dots": LinearDots, loading: Loading, morph: Morph, orbit: Orbit, pulse: Pulse, radar: Radar, ring: Ring, ripple: Ripple, slide: Slide, snake: Snake, swirl: Swirl, trace: Trace, wave: Wave, } satisfies Record>; 4d:T445,import { fadeCss } from "./fade"; import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; const RING = [0, 1, 2, 7, null, 3, 6, 5, 4]; const PLACES = RING.filter((place) => place !== null).length; const css = ` .ld-swirl { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: calc(${SIZE} * 0.15625); box-sizing: border-box; width: ${SIZE}; height: ${SIZE}; padding: calc(${SIZE} * 0.0625); } .ld-swirl-cell { background: currentColor; border-radius: calc(${SIZE} * 0.0625); } ${fadeCss("swirl", "cell", PLACES, { dim: 0.2, rest: 0.6 })} `; export function Swirl(props: SpinnerProps) { return ( <> {css}

{RING.map((place, index) => place === null ? (

) : (

) )}

); } 4e:T52e,import { type CapProps, linecap } from "./cap"; import { type EasingProps, rotationCss, spinClass } from "./easing"; import { SpinnerStyle, spinnerRoot } from "./frame"; import { SIZE } from "./motion"; import type { SpinnerProps } from "./types"; export interface TraceProps extends SpinnerProps, EasingProps, CapProps {} const VIEW = 20; const SIDE = 17.5; const RADIUS = 4; const PERIMETER = 4 * (SIDE - 2 * RADIUS) + 2 * Math.PI * RADIUS; const DASH = 16; const RECT = { height: SIDE, rx: RADIUS, width: SIDE, x: (VIEW - SIDE) / 2, y: (VIEW - SIDE) / 2, }; const css = ` .ld-trace { width: ${SIZE}; height: ${SIZE}; } ${rotationCss( "trace", `to { stroke-dashoffset: ${-PERIMETER}; }` )} `; export function Trace({ cap, easing, ...rest }: TraceProps) { return ( <> {css} ); } 4f:T5ab,import { SpinnerStyle, spinnerRoot, step } from "./frame"; import { animation, SIZE, STEP_VAR, stagger } from "./motion"; import type { SpinnerProps } from "./types"; export type WaveOrigin = "bottom" | "center"; export const DEFAULT_WAVE_ORIGIN: WaveOrigin = "center"; export interface WaveProps extends SpinnerProps { origin?: WaveOrigin; } const BARS = Array.from({ length: 5 }, (_, index) => index); const css = ` .ld-wave { display: flex; align-items: center; justify-content: space-between; width: ${SIZE}; height: ${SIZE}; } .ld-wave-bar { width: calc(${SIZE} * 0.12); height: 100%; background: currentColor; border-radius: 9999px; ${animation("wave", "ld-wave-rise", "ease-in-out")} animation-delay: ${stagger("wave", BARS.length)}; } .ld-wave-bar-bottom { align-self: flex-end; } @keyframes ld-wave-rise { 0%, 100% { height: 30%; } 50% { height: 100%; } } @media (prefers-reduced-motion: reduce) { .ld-wave-bar { height: calc((0.4 + var(${STEP_VAR}) * 0.15) * 100%); } } `; export function Wave({ origin = DEFAULT_WAVE_ORIGIN, ...rest }: WaveProps) { return ( <> {css}

{BARS.map((index) => (

))}

); } 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#feedback","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Feedback"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Loaders"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Loaders"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Twenty-nine copy-installable loading indicators with shared size, color, duration, playback, and spinner-specific controls."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"loaders","group":"feedback","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/feedback/loaders/loaders.tsx","code":"import type { ComponentProps, ComponentType } from \"react\";\nimport { SPINNERS, type SpinnerName, type SpinnerProps } from \"./lib\";\n\nexport * from \"./lib\";\n\nexport type LoaderProps = {\n name: Name;\n label?: string;\n color?: string;\n} & Omit, \"color\">;\n\n/** A named convenience wrapper for the loading.dev spinner collection. */\nexport function Loader(props: LoaderProps) {\n const { name, label, color = \"currentColor\", ...spinnerProps } = props;\n const Spinner = SPINNERS[name] as ComponentType;\n const spinner = ;\n\n return label ? (\n \n {spinner}\n \n {label}\n \n \n ) : (\n spinner\n );\n}\n"},{"path":"blocks/feedback/loaders/demo.tsx","code":"$30"},{"path":"blocks/feedback/loaders/meta.ts","code":"$31"},{"path":"blocks/feedback/loaders/lib/arc.tsx","code":"import { type CapProps, linecap } from \"./cap\";\nimport { type EasingProps, rotationCss, spinClass } from \"./easing\";\nimport { SpinnerStyle, spinnerRoot } from \"./frame\";\nimport { SIZE } from \"./motion\";\nimport type { SpinnerProps } from \"./types\";\n\nexport interface ArcProps extends SpinnerProps, EasingProps, CapProps {}\n\nconst css = `\n.ld-arc {\n width: ${SIZE};\n height: ${SIZE};\n}\n\n${rotationCss(\"arc\")}\n`;\n\nexport function Arc({ cap, easing, ...rest }: ArcProps) {\n return (\n <>\n {css}\n \n \n \n \n );\n}\n"},{"path":"blocks/feedback/loaders/lib/atom.tsx","code":"$32"},{"path":"blocks/feedback/loaders/lib/blocks.tsx","code":"$33"},{"path":"blocks/feedback/loaders/lib/bouncing-dots.tsx","code":"$34"},{"path":"blocks/feedback/loaders/lib/cap.ts","code":"export type Cap = \"flat\" | \"round\";\n\nexport const DEFAULT_CAP: Cap = \"round\";\n\nexport interface CapProps {\n cap?: Cap;\n}\n\nexport function linecap(cap: Cap = DEFAULT_CAP): \"butt\" | \"round\" {\n return cap === \"flat\" ? \"butt\" : \"round\";\n}\n"},{"path":"blocks/feedback/loaders/lib/cascade.tsx","code":"$35"},{"path":"blocks/feedback/loaders/lib/circular-dots.tsx","code":"$36"},{"path":"blocks/feedback/loaders/lib/classic-v2.tsx","code":"$37"},{"path":"blocks/feedback/loaders/lib/classic.tsx","code":"$38"},{"path":"blocks/feedback/loaders/lib/clock.tsx","code":"$39"},{"path":"blocks/feedback/loaders/lib/comet.tsx","code":"$3a"},{"path":"blocks/feedback/loaders/lib/compass.tsx","code":"$3b"},{"path":"blocks/feedback/loaders/lib/dual.tsx","code":"$3c"},{"path":"blocks/feedback/loaders/lib/easing.ts","code":"import { animation, type SpinnerName } from \"./motion\";\n\nexport type Easing = \"linear\" | \"ease-in-out\" | \"stacked\";\n\nexport const DEFAULT_EASING: Easing = \"linear\";\n\nexport interface EasingProps {\n easing?: Easing;\n}\n\nexport function spinClass(\n name: SpinnerName,\n easing: Easing = DEFAULT_EASING\n): string {\n const base = `ld-${name}-spin`;\n return easing === \"linear\" ? base : `${base} ${base}-${easing}`;\n}\n\nconst ROTATE = `to {\n transform: rotate(360deg);\n }`;\n\nexport function rotationCss(name: SpinnerName, turn = ROTATE): string {\n return `\n.ld-${name}-spin {\n transform-origin: center;\n ${animation(name, `ld-${name}-rotate`, \"linear\")}\n}\n\n.ld-${name}-spin-ease-in-out {\n animation-timing-function: ease-in-out;\n}\n\n.ld-${name}-spin-stacked {\n animation-name: ld-${name}-rotate, ld-${name}-rotate;\n animation-timing-function: linear, ease-in-out;\n animation-composition: add;\n}\n\n@keyframes ld-${name}-rotate {\n ${turn}\n}\n`;\n}\n"},{"path":"blocks/feedback/loaders/lib/eclipse.tsx","code":"$3d"},{"path":"blocks/feedback/loaders/lib/fade.ts","code":"import { animation, type SpinnerName, stagger } from \"./motion\";\n\nexport function fadeCss(\n name: SpinnerName,\n element: string,\n count: number,\n { dim, rest }: { dim: number; rest: number }\n): string {\n return `\n.ld-${name}-${element} {\n ${animation(name, `ld-${name}-fade`, \"linear\")}\n animation-delay: ${stagger(name, count)};\n}\n\n@keyframes ld-${name}-fade {\n from {\n opacity: 1;\n }\n to {\n opacity: ${dim};\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ld-${name}-${element} {\n opacity: ${rest};\n }\n}\n`;\n}\n"},{"path":"blocks/feedback/loaders/lib/flip.tsx","code":"import { SpinnerStyle, spinnerRoot } from \"./frame\";\nimport { animation, SIZE } from \"./motion\";\nimport type { SpinnerProps } from \"./types\";\n\nconst css = `\n.ld-flip {\n width: ${SIZE};\n height: ${SIZE};\n perspective: calc(${SIZE} * 3);\n}\n\n.ld-flip-face {\n width: 64%;\n height: 64%;\n margin: 18%;\n background: currentColor;\n border-radius: calc(${SIZE} * 0.06);\n ${animation(\"flip\", \"ld-flip-turn\", \"ease-in-out\")}\n}\n\n@keyframes ld-flip-turn {\n 0% {\n transform: rotateX(0) rotateY(0);\n }\n 50% {\n transform: rotateX(-180deg) rotateY(0);\n }\n 100% {\n transform: rotateX(-180deg) rotateY(-180deg);\n }\n}\n`;\n\nexport function Flip(props: SpinnerProps) {\n return (\n <>\n {css}\n

\n \n );\n}\n"},{"path":"blocks/feedback/loaders/lib/frame.tsx","code":"$3e"},{"path":"blocks/feedback/loaders/lib/gather.tsx","code":"$3f"},{"path":"blocks/feedback/loaders/lib/index.ts","code":"$40"},{"path":"blocks/feedback/loaders/lib/leap.tsx","code":"$41"},{"path":"blocks/feedback/loaders/lib/linear-dots.tsx","code":"$42"},{"path":"blocks/feedback/loaders/lib/loading.tsx","code":"$43"},{"path":"blocks/feedback/loaders/lib/morph.tsx","code":"import { SpinnerStyle, spinnerRoot } from \"./frame\";\nimport { animation, SIZE } from \"./motion\";\nimport type { SpinnerProps } from \"./types\";\n\nconst css = `\n.ld-morph {\n width: ${SIZE};\n height: ${SIZE};\n}\n\n.ld-morph-shape {\n width: 64%;\n height: 64%;\n margin: 18%;\n background: currentColor;\n border-radius: calc(${SIZE} * 0.08);\n ${animation(\"morph\", \"ld-morph-round\", \"ease-in-out\")}\n}\n\n@keyframes ld-morph-round {\n 0% {\n border-radius: calc(${SIZE} * 0.08);\n transform: rotate(0);\n }\n 50% {\n border-radius: 50%;\n transform: rotate(45deg);\n }\n 100% {\n border-radius: calc(${SIZE} * 0.08);\n transform: rotate(90deg);\n }\n}\n`;\n\nexport function Morph(props: SpinnerProps) {\n return (\n <>\n {css}\n

\n \n );\n}\n"},{"path":"blocks/feedback/loaders/lib/motion.ts","code":"$44"},{"path":"blocks/feedback/loaders/lib/orbit.tsx","code":"$45"},{"path":"blocks/feedback/loaders/lib/pulse.tsx","code":"$46"},{"path":"blocks/feedback/loaders/lib/radar.tsx","code":"$47"},{"path":"blocks/feedback/loaders/lib/ring.tsx","code":"$48"},{"path":"blocks/feedback/loaders/lib/ripple.tsx","code":"$49"},{"path":"blocks/feedback/loaders/lib/slide.tsx","code":"$4a"},{"path":"blocks/feedback/loaders/lib/snake.tsx","code":"$4b"},{"path":"blocks/feedback/loaders/lib/spinners.ts","code":"$4c"},{"path":"blocks/feedback/loaders/lib/swirl.tsx","code":"$4d"},{"path":"blocks/feedback/loaders/lib/trace.tsx","code":"$4e"},{"path":"blocks/feedback/loaders/lib/types.ts","code":"export interface SpinnerProps {\n className?: string;\n color?: string;\n duration?: number;\n playState?: \"paused\" | \"running\";\n size?: number;\n}\n"},{"path":"blocks/feedback/loaders/lib/wave.tsx","code":"$4f"}]}],"props":"$L50"}],"$L51"]}]