Component/
Arc
A single open stroke rotating in a circle.
<script> import { Arc } from 'loadsv';</script><Arc size={48} />Size
Sets the width and height in pixels. The default is 20.
<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.
<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.
<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.
<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.
<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.
<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.
<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.