# loadsv

> A lightweight library of beautiful loading indicators for Svelte.

```sh
npm install loadsv
```

```svelte
<script>
	import { Arc } from 'loadsv';
</script>

<Arc size={16} />
```

Every spinner accepts `size`, `color`, `duration` and `playState`, and forwards any other attribute to its root `<span>`. Some also take `easing` (Arc, Ring) or `cap` (Arc, Dual, Ring, Snake).

`--lsv-duration` and `--lsv-play-state` set on any ancestor drive every spinner inside it; props win over the cascade.

Spinners are decorative and `aria-hidden`, respect reduced motion out of the box, and require Svelte 5.16 or later.

## Spinners

- [Arc](/spinners/arc.md): A single open stroke rotating in a circle. Import as `Arc`.
- [Atom](/spinners/atom.md): Three rings turning over inside a circle, each on its own axis. Import as `Atom`.
- [Blocks](/spinners/blocks.md): Nine blocks shrinking and growing in a sweep across a grid. Import as `Blocks`.
- [Bounce](/spinners/bounce.md): A ball bouncing on the spot, squashing as it lands. Import as `Bounce`.
- [Bouncing dots](/spinners/bouncing-dots.md): Three staggered dots bouncing up and down. Import as `BouncingDots`.
- [Circular dots](/spinners/circular-dots.md): Eight dots in a ring, the brightest hopping from one to the next. Import as `CircularDots`.
- [Classic](/spinners/classic.md): Twelve fading bars arranged in a radial pattern. Import as `Classic`.
- [Clock](/spinners/clock.md): Two hands on a faint dial, one sweeping, one creeping. Import as `Clock`.
- [Comet](/spinners/comet.md): A full ring fading into its tail. Import as `Comet`.
- [Dual](/spinners/dual.md): Two arcs turning in opposite directions. Import as `Dual`.
- [Eclipse](/spinners/eclipse.md): Two dots circling each other, seen edge-on, one passing behind the other. Import as `Eclipse`.
- [Flip](/spinners/flip.md): A square flipping over on one axis, then the other. Import as `Flip`.
- [Handoff](/spinners/handoff.md): Two slanted pills that tuck together as they turn over, then fan back out. Import as `Handoff`.
- [Hourglass](/spinners/hourglass.md): An hourglass draining its sand, then flipping over. Import as `Hourglass`.
- [Inchworm](/spinners/inchworm.md): A worm inching round a rounded square, stretching round each corner, then gathering up. Import as `Inchworm`.
- [Infinity loop](/spinners/infinity-loop.md): A bead running a figure-eight along a faint track. Import as `InfinityLoop`.
- [Leap](/spinners/leap.md): Three dots in a row, the last one leaping over the others to the front. Import as `Leap`.
- [Linear dots](/spinners/linear-dots.md): Three dots lighting up in turn from left to right. Import as `LinearDots`.
- [Newton’s cradle](/spinners/newtons-cradle.md): Three balls in a row, the outer two swinging out in turn. Import as `NewtonsCradle`.
- [Pulse](/spinners/pulse.md): A ring rippling outward from a dot. Import as `Pulse`.
- [Ribbon](/spinners/ribbon.md): Three pills in an S, flowing into its mirror and back like a ribbon. Import as `Ribbon`.
- [Ring](/spinners/ring.md): An arc rotating in a faint circle. Import as `Ring`.
- [Ripple](/spinners/ripple.md): Three rings spreading out from the center. Import as `Ripple`.
- [Slide](/spinners/slide.md): Three dots taking turns sliding into the empty corner of a square. Import as `Slide`.
- [Snake](/spinners/snake.md): An arc chasing its own tail, stretching out and shrinking back as it turns. Import as `Snake`.
- [Spark](/spinners/spark.md): Eight petals, long and short, flaring in a wave while the spark slowly turns. Import as `Spark`.
- [Swirl](/spinners/swirl.md): A bright cell gliding round the edge of a grid, trailing light. Import as `Swirl`.
- [Wave](/spinners/wave.md): Five bars rising and falling in a wave. Import as `Wave`.

## Optional

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