Skip to content
loadsv

loadsv

Loading indicators for Svelte, made to sit inside your UI.

GitHub
All 28 spinners

Installation

npm install loadsv

Usage

Import a spinner and drop it in. It takes the text color around it.

<script>	import { Arc } from 'loadsv';</script><Arc /><Arc size={32} color="#ff3e00" />

In a button

Swap the label for a spinner while the action runs. The button keeps its width.

<button disabled={saving}>	{#if saving}<Arc size={14} />{/if}	{saving ? 'Saving…' : 'Save changes'}</button>

In a field

Check while they type. A small spinner at the end of the field says the app heard them.

@

@pedro is available.

<input bind:value={handle} oninput={check} />{#if checking}<Ring size={14} />{/if}

In a toast

For work that happens somewhere else. Say what’s running, then say that it’s done.

<div role="status" class="toast">	<Snake size={16} />	Deploying loadsv-docs</div>

While someone’s typing

Or something. Ask a question and watch the reply get written.

  1. What’s new in loadsv?
  2. Sixteen new spinners, 28 in all. Snake is the only one that repaints.
{#if typing}	<div class="bubble" aria-label="Assistant is typing">		<BouncingDots size={20} />	</div>{/if}

When a whole panel waits

Give the spinner room, and a sentence saying what it’s waiting for.

Invoices
Fetching invoices…
{#await invoices}	<Blocks size={28} />	<p>Fetching invoices…</p>{:then rows}	<InvoiceList {rows} />{/await}

Every spinner

Hover one to play it. Each has its own page with a playground and every option.