30+ Zero-Dependency Loading Spinners for Svelte – svelte-spins

svelte-spins is a loading indicator library that allows you to use loaders.css-based loading spinners as Svelte components.

These spinners are suitable for indicating loading states during data fetching or user wait times. They help improve user experience by providing visual feedback for asynchronous operations.

Features

Use Cases

• Display loading states in form submit buttons to prevent duplicate submissions and provide user feedback during API calls.
• Add page-level loading indicators during route transitions in SvelteKit applications to show progress between navigation events.
• Show data-fetching states in dashboard widgets or data tables while waiting for backend responses or GraphQL queries.
• Provide visual feedback during file upload operations or image processing tasks with customizable spinner colors that match upload progress states.
• Indicate background synchronization or auto-save operations in content editors or form inputs without blocking user interaction.

How to Use It

1. Add the svelte-spins package to your project using your preferred package manager.

For npm:

npm i svelte-spins

For pnpm:

pnpm i svelte-spins

For Yarn:

yarn add svelte-spins

For Bun:

bun i svelte-spins

2. Import any spinner component directly into your Svelte files.

In this example, we will use the Pacman loader and customize its appearance using the available props. The color prop sets the spinner’s foreground color, the classes prop applies custom CSS classes, and the style prop adds inline CSS.

<script lang="ts">
  import { Pacman } from "svelte-spins";
  let loaderColor = "#FF3E00"; // Svelte's brand color
  let customClasses = "my-pacman-loader";
  let inlineStyles = "transform: scale(0.8);";
</script>
<style>
  .my-pacman-loader {
    margin-top: 2rem;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
  }
</style>
<Pacman color={loaderColor} classes={customClasses} style={inlineStyles} />

3. All available loaders & loader names.

Related Resources

• loaders.css: The original pure CSS animation library that svelte-spins is based on.
• SvelteKit: The official application framework for Svelte.
• svelte-loading-spinners: An alternative Svelte library offering a different collection of loading spinner components.

FAQs

Q: Can I use multiple spinners on the same page?
A: Yes, you can render as many spinner instances as needed. Each component operates independently, so you can use different loaders with different colors and styles across your application.

Q: Are these spinners accessible for screen readers?
A: The spinners are purely visual elements. Wrap them in containers with appropriate ARIA labels like aria-label="Loading" or aria-live="polite" to communicate loading states to assistive technologies.

Q: Does svelte-spins require an external CSS file?
A: No, it is a zero-dependency library. All styles required for the animations are self-contained within the Svelte components.