Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Schum123/svelte-loading-spinners
A collection of loading spinner components for SvelteJs
https://github.com/Schum123/svelte-loading-spinners
Last synced: about 1 month 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 (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-04-03T12:05:32.000Z (8 months ago)
- Last Synced: 2024-11-05T04:51:34.135Z (about 1 month 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