Read more in Interfaces, the first design engineering magazine.

loading-dev

Beautiful loading indicators for React.

npm install loading-dev

import { Arc } from "loading-dev";

<Arc size={16} />

All indicators support size, color and duration. Some also expose additional controls like easing, cap or spinner-specific props.

The library exposes playState and you can customize any indicator with your own styles.

The spinners respect reduced motion out of the box and require React 19 or later.

Current list of indicators:

Arc, Atom, Blocks, BouncingDots, Cascade, Chevrons, CircularDots, Classic, ClassicV2, Clock, Comet, Compass, Dual, Eclipse, Fill, Flip, Gather, Leap, LinearDots, Loading, Loop, Morph, Orbit, Phases, Pulse, Radar, Ring, Ripple, Scan, Slide, Snake, Split, Steps, Swirl, Trace, Wave.

Docs and live previews are available at loading.dev.

License

MIT