# Arc

A single open stroke rotating in a circle.

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

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

## Size

Sets the width and height in pixels. The default is `20`.

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

<div class="flex items-center gap-6">
	<Arc size={16} />
	<Arc size={24} />
	<Arc size={40} />
</div>
```

## Custom classes

Pass a `class` to adjust a spinner beyond what the props cover. The library’s own styles carry no specificity, so your classes always win.

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

<Arc class="opacity-40" size={32} />
```

## Color

Spinners paint with `currentColor`, so they follow the text color around them. Pass any CSS color to tint one directly.

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

<Arc color="#ff3e00" size={32} />
```

## Duration

Sets the length of one loop in milliseconds. Higher is slower. The default for this spinner is `800`. Set `--lsv-duration` on any ancestor to change every spinner inside it.

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

<Arc duration={1600} size={32} />
```

## State

Pauses or resumes the animation with `paused` or `running`. Setting `--lsv-play-state` on an ancestor does the same for a whole subtree.

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

<Arc playState="paused" size={32} />
```

## Easing

Controls how the spinner moves through each turn. `linear` keeps a constant speed, `ease-in-out` speeds up and slows down, and `stacked` layers the two so the speed swells without ever stopping. The default is `linear`.

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

<div class="flex items-center gap-6">
	<Arc easing="linear" size={32} />
	<Arc easing="ease-in-out" size={32} />
	<Arc easing="stacked" size={32} />
</div>
```

## Cap

Controls how the ends of the stroke are drawn. `round` finishes them with a half circle, `flat` cuts them square. The default is `round`.

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

<div class="flex items-center gap-6">
	<Arc cap="round" size={32} />
	<Arc cap="flat" size={32} />
</div>
```

## Accessibility

Spinners are decorative and hidden from assistive technology, so announce loading on the element that is busy, for example with `aria-busy` and visually hidden text. When reduced motion is on, spinners hold still and gently pulse instead.