# loading.dev

> A lightweight library full of beautiful loading indicators for React.

```sh
npm install loading-dev
```

```tsx
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.

## Spinners

- [Arc](https://loading.dev/spinners/arc/markdown): A single open stroke rotating in a circle. Import as `Arc`.
- [Atom](https://loading.dev/spinners/atom/markdown): Three rings tumbling inside a circle. Import as `Atom`.
- [Blocks](https://loading.dev/spinners/blocks/markdown): Nine blocks shrinking and growing in a sweep across a grid. Import as `Blocks`.
- [Bouncing dots](https://loading.dev/spinners/bouncing-dots/markdown): Three staggered dots bouncing up and down. Import as `BouncingDots`.
- [Cascade](https://loading.dev/spinners/cascade/markdown): Three nested arcs fanning into a spiral and snapping back in line. Import as `Cascade`.
- [Circular dots](https://loading.dev/spinners/circular-dots/markdown): Eight dots in a ring, the brightest hopping around. Import as `CircularDots`.
- [Classic](https://loading.dev/spinners/classic/markdown): Twelve fading bars arranged in a radial pattern. Import as `Classic`.
- [Classic v2](https://loading.dev/spinners/classic-v2/markdown): Two lit ticks stepping around a ring of eight. Import as `ClassicV2`.
- [Clock](https://loading.dev/spinners/clock/markdown): A clock hand sweeping around a faint face. Import as `Clock`.
- [Comet](https://loading.dev/spinners/comet/markdown): A full ring fading into its tail. Import as `Comet`.
- [Dual](https://loading.dev/spinners/dual/markdown): Two arcs turning in opposite directions. Import as `Dual`.
- [Eclipse](https://loading.dev/spinners/eclipse/markdown): Two dots trading places, one passing behind the other. Import as `Eclipse`.
- [Flip](https://loading.dev/spinners/flip/markdown): A square flipping over on one axis, then the other. Import as `Flip`.
- [Gather](https://loading.dev/spinners/gather/markdown): Four blocks pulling together, turning, and pushing apart. Import as `Gather`.
- [Leap](https://loading.dev/spinners/leap/markdown): Three dots in a row, the last one leaping to the front. Import as `Leap`.
- [Linear dots](https://loading.dev/spinners/linear-dots/markdown): Three dots lighting up in turn from left to right. Import as `LinearDots`.
- [Loading](https://loading.dev/spinners/loading/markdown): The loading.dev mark, its brightest block circling the ring. Import as `Loading`.
- [Morph](https://loading.dev/spinners/morph/markdown): A square rounding into a circle and back as it turns. Import as `Morph`.
- [Orbit](https://loading.dev/spinners/orbit/markdown): A fading half-arc rotating around a dot. Import as `Orbit`.
- [Pulse](https://loading.dev/spinners/pulse/markdown): A ring rippling outward from a dot. Import as `Pulse`.
- [Ring](https://loading.dev/spinners/ring/markdown): An arc rotating in a faint circle. Import as `Ring`.
- [Ripple](https://loading.dev/spinners/ripple/markdown): Three rings spreading out from the center. Import as `Ripple`.
- [Slide](https://loading.dev/spinners/slide/markdown): Three dots sliding into the empty corner of a square. Import as `Slide`.
- [Snake](https://loading.dev/spinners/snake/markdown): An arc stretching and shrinking as it circles. Import as `Snake`.
- [Swirl](https://loading.dev/spinners/swirl/markdown): A bright cell chasing its trail around a square. Import as `Swirl`.
- [Trace](https://loading.dev/spinners/trace/markdown): A dash tracing the outline of a rounded square. Import as `Trace`.
- [Wave](https://loading.dev/spinners/wave/markdown): Five bars rising and falling in a wave. Import as `Wave`.

## Optional

- [GitHub](https://github.com/jakubkrehel/loading): Source and issues.
- [npm](https://www.npmjs.com/package/loading-dev): The package itself.