Viora LogoViora UI
Login

Loader

A collection of terminal-grade and fluid spring animated loaders, spinners, and glyph cycles.

demo-motion-loader-demo.tsx
Loading source code...

Installation

pnpm dlx viora-ui add motion-loader
npx viora-ui add motion-loader
yarn viora-ui add motion-loader
bunx --bun viora-ui add motion-loader

Usage

import { Loader } from "viora-ui";

export default function Demo() {
  return (
    <div className="flex gap-4 items-center">
      <Loader variant="morph" size={36} />
      <Loader variant="metaballs" size={36} />
      <Loader variant="ascii" size={24} />
      <Loader variant="comet" size={32} />
    </div>
  );
}

Available Variants

VariantDescription
spinnerContinuous SVG stroke loop
morphSVG geometric path tweening (circle, square, triangle, hexagon)
cometRadial trailing comet tails
metaballsGooey fluid metaballs with SVG filters
dotsStaggered hopping dots with spring ease
barsVertical pulsing equalizer bars
dot-matrix3x3 diagonal wave matrix
dither4x4 ordered Bayer threshold halftone shimmer
asciiClassic CLI terminal glyph cycle
ascii-brailleBraille 8-dot revolving orbit
ascii-blocksVertical block height level indicator
scrambleMatrix random glyph decipher animation
newtonNewton's cradle momentum physics
helix3D double helix wave oscillation
percentDynamic numeric increment loader

Built by Otis

Last updated: 9/13/2026