https://github.com/Schum123/svelte-loading-spinners

A collection of loading spinner components for SvelteJs
https://github.com/Schum123/svelte-loading-spinners

Last synced: 1 day ago
JSON representation

A collection of loading spinner components for SvelteJs

• Host: GitHub
• URL: https://github.com/Schum123/svelte-loading-spinners
• Owner: Schum123
• License: mit
• Created: 2020-03-06T10:40:36.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-03T12:05:32.000Z (7 months ago)
• Last Synced: 2024-11-05T04:51:34.135Z (4 days ago)
• Language: Svelte
• Homepage: https://schum123.github.io/svelte-loading-spinners/
• Size: 702 KB
• Stars: 514
• Watchers: 9
• Forks: 34
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - Svelte Loading Spinners - Uma coleção de componentes de carregamento. (UI Componentes / Comunidade Global)

README

        
# svelte-loading-spinners

> collection of loading spinners with Svelte.js

## Installation

```bash

npm i --save-dev svelte-loading-spinners

```

or

```bash

yarn add -D svelte-loading-spinners

```

## Usage

Import `navigating` from `$app/stores`.

When navigating starts, it's value is a Navigation object with from, to, type and (if type === 'popstate') delta properties. When navigating finishes, its value reverts to null. 

Read More: [Sveltekit Docs](https://kit.svelte.dev/docs/modules#$app-stores-navigating) and [Stackoverflow](https://stackoverflow.com/questions/70218035/sveltekit-loading-indicator-when-a-page-load-time-threshold-is-exceeded)

By using an `{#if $navigating}` this allows us to show the loading animation when the page is loading and stop once it's fully rendered.

```svelte

	import { Jumper } from 'svelte-loading-spinners';

	import { navigating } from '$app/stores'

{#if $navigating}

	

{/if}

```

## List of available spinners

Props: `size`, `color`, `unit`, `duration` and `pause`.

The default props; `unit` is `px`, `color` is `#FF3E00` and `size` `60px`.

Notes:

`Circle2` instead of the `color` and `duration` props has `colorOuter`, `colorCenter`, `colorInner`, `durationOuter`, `durationCenter`, `durationInner` props.

`Circle3` has `ballTopLeft`, `ballTopRight`, `ballBottomLeft` and `ballBottomRight` as props aswell.

|      Loaders |

| -----------: |

|    BarLoader |

|      Chasing |

|       Circle |

|      Circle2 |

|      Circle3 |

| DoubleBounce |

|     Firework |

|    Jellyfish |

|       Jumper |

|        Pulse |

|      Rainbow |

|   RingLoader |

|     ScaleOut |

|       Shadow |

|     SpinLine |

|      Stretch |

|   SyncLoader |

|         Wave |

|       Square |

|         Moon |

## Demo

List of all spinner: [Demo](https://schum123.github.io/svelte-loading-spinners/)

## Development Setup