Skip to content

feat: add loader component with seventeen variants#91

Merged
starc007 merged 1 commit into
mainfrom
feat/loader
Jul 4, 2026
Merged

feat: add loader component with seventeen variants#91
starc007 merged 1 commit into
mainfrom
feat/loader

Conversation

@starc007

@starc007 starc007 commented Jul 4, 2026

Copy link
Copy Markdown
Owner

What

New `loader` component (motion category) — one `Loader` with 17 variants off a single `variant` prop:

  • spinner — ring + rotating arc
  • dots — bouncing dots
  • bars — equalizer bars
  • dot-matrix — 3×3 LED grid, diagonal wave
  • dither — 4×4 grid dissolving in Bayer-matrix order
  • morph — SVG path morphing circle → square → triangle → hexagon → diamond, each shape holds before flowing to the next
  • comet — head + fading trail orbiting
  • scramble — "LOADING" glyph-scrambling then resolving
  • metaballs — two blobs merging via SVG gooey filter
  • newton — Newton's cradle
  • helix — DNA double helix of dots
  • percent — 0→100 counter + fill bar
  • ascii / ascii-line / ascii-braille / ascii-blocks / ascii-bounce — terminal-style frame spinners

Details

  • One `size` prop scales everything; `speed` controls cycle time; `currentColor` so it inherits text color.
  • `role="status"` + `aria-label` + sr-only label.
  • Reduced motion swaps every transform for a calm opacity pulse.
  • Morph uses SVG `d` interpolation (clip-path polygons don't tween reliably in framer) with doubled keyframes so each shape fully forms and holds.

Test plan

  • `bun run check` clean (typecheck, lint, registry — 42 components)

@starc007 starc007 merged commit f547725 into main Jul 4, 2026
2 checks passed
@starc007 starc007 deleted the feat/loader branch July 4, 2026 16:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant