Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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