loadercn

loadercn - Animated Loaders for shadcn/ui

loadercn is an open-source collection of animated React loaders in five families: grid, orbital, classic, network and chart. Each loader is a single file that depends only on React, inherits the surrounding text color and respects prefers-reduced-motion.

The collection is published as a shadcn registry, so any loader can be browsed and previewed on the site, then added to a project with one command:

npx shadcn@latest add @loadercn/grid-wave

Key Features:

• 89 loaders, five families: Grid, orbital, classic, network and chart loaders, from simple spinners to spherical and chart-based animations.
• Zero dependencies: Every loader is plain React and CSS. No animation library and no global stylesheet, so the file can also be copied by hand into projects that don't use shadcn.
• Consistent API: All loaders share the same size, speed and label props and accept any <span> props, so they are interchangeable.
• Themeable by default: Loaders inherit currentColor, so a single Tailwind text class restyles them.
• Accessible: Each loader exposes a status label for screen readers and respects the user's reduced motion preference.
• Performance: Animations run on per-element CSS keyframes so they stay on the GPU.

Tech Stack:

• Loaders: React 19, CSS keyframes, TypeScript
• Site and registry: Next.js 16, Tailwind CSS v4, shadcn/ui with Base UI primitives, deployed on Vercel