{"id":15242,"library":"svelte-loading-spinners","title":"Svelte Loading Spinners","description":"This library offers a collection of loading spinner Svelte components. The current stable version is `0.3.6`. It provides a variety of visual spinners, including `Jumper`, `BarLoader`, `Circle`, and `Wave`, each implemented as a standalone Svelte component. Updates are typically released as needed, responding to bug fixes or Svelte ecosystem changes, rather than on a fixed cadence. A key architectural aspect is that these are pure Svelte components, making them reactive and easily integrated into any Svelte application. They are designed to work seamlessly with SvelteKit, particularly demonstrating integration with the `$app/stores.navigating` store for handling page transitions. Each spinner component is highly customizable via common props such as `size`, `color`, `unit`, and `duration`. Specific spinners like `Circle2` and `Circle3` offer additional, unique props for fine-grained control over their appearance. The package includes TypeScript type definitions, providing full type safety for developers using TypeScript in their Svelte projects.","status":"active","version":"0.3.6","language":"javascript","source_language":"en","source_url":"https://github.com/schum123/svelte-loading-spinners","tags":["javascript","svelte","typescript"],"install":[{"cmd":"npm install svelte-loading-spinners","lang":"bash","label":"npm"},{"cmd":"yarn add svelte-loading-spinners","lang":"bash","label":"yarn"},{"cmd":"pnpm add svelte-loading-spinners","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Most spinners are named exports. Attempting a default import will result in an error.","wrong":"import Jumper from 'svelte-loading-spinners'; // Not a default export","symbol":"Jumper","correct":"import { Jumper } from 'svelte-loading-spinners';"},{"note":"The library primarily targets ESM environments, which are typical for modern Svelte and SvelteKit projects. CommonJS `require` might not work directly without proper transpilation or configuration.","wrong":"const { BarLoader } = require('svelte-loading-spinners'); // Primarily targets ESM environments","symbol":"BarLoader","correct":"import { BarLoader } from 'svelte-loading-spinners';"},{"note":"All individual spinner components are re-exported from the main `svelte-loading-spinners` package entry point, simplifying imports.","wrong":"import { Circle2 } from 'svelte-loading-spinners/src/Circle2.svelte'; // Direct component path is not recommended or necessary","symbol":"Circle2","correct":"import { Circle2 } from 'svelte-loading-spinners';"}],"quickstart":{"code":"\n\n\n\n\n\n{#if $navigating}\n \n{/if}\n\n\n{#if showManualSpinner}\n \n{/if}\n\n\n\n","lang":"typescript","description":"Demonstrates integrating `svelte-loading-spinners` for SvelteKit page navigation detection and manual task simulation, using `Jumper` and `Wave` components. This example should be placed in a SvelteKit `+layout.svelte` file."},"warnings":[{"fix":"Always refer to the 'List of available spinners' section in the package README or the component's TypeScript definitions to understand component-specific props and their usage.","message":"Some spinner components, specifically `Circle2` and `Circle3`, feature unique sets of props (e.g., `colorOuter`, `ballTopLeft`) that differ from the standard `size`, `color`, `unit`, and `duration` props shared by most other spinners. Assuming universal props will lead to unstyled or incorrectly animated spinners.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For vanilla Svelte applications, manage spinner visibility using your own reactive state or integrate with your chosen router's lifecycle events. Ensure SvelteKit is properly set up if you intend to use `$app/stores.navigating`.","message":"The primary integration pattern showcased in the README uses `$app/stores.navigating` to display loading animations during page transitions. This store is exclusive to SvelteKit projects. Using `$navigating` in a vanilla Svelte application without SvelteKit will result in a `ReferenceError: $navigating is not defined`.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If you encounter issues where the spinners do not appear in production environments, consider reinstalling the package as a standard dependency: `npm install svelte-loading-spinners` or `yarn add svelte-loading-spinners`.","message":"The package's installation instructions suggest installing it as a development dependency (`npm i --save-dev`). While this is often fine for Svelte components that are compiled into the main bundle, in some specific build configurations or deployment scenarios, it might be safer to install it as a regular dependency (`npm install svelte-loading-spinners`) to guarantee its inclusion in production builds.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure the package is correctly installed via `npm install svelte-loading-spinners` or `yarn add svelte-loading-spinners`. Double-check the import statement for typos: `import { ComponentName } from 'svelte-loading-spinners';`.","cause":"The package was not installed, the import path is incorrect, or the module resolution in your build environment is misconfigured.","error":"Cannot find module 'svelte-loading-spinners'"},{"fix":"Use a named import with curly braces for all components: `import { Jumper } from 'svelte-loading-spinners';`. Verify the component name is correctly capitalized.","cause":"This error occurs when attempting to use a default import for a component that is a named export, or when the component name is misspelled.","error":"'Jumper' is not exported from 'svelte-loading-spinners'"},{"fix":"If using SvelteKit, ensure `import { navigating } from '$app/stores';` is present in your script. If not using SvelteKit, you cannot use `$navigating` and must manage spinner visibility using alternative methods (e.g., local component state).","cause":"This issue arises when attempting to access the `$navigating` store, which is part of SvelteKit's `$app/stores`, in an environment where SvelteKit is not active or correctly configured, or if `$app/stores` was not imported.","error":"ReferenceError: $navigating is not defined"}],"ecosystem":"npm"}