svelte-loading

Simple Loading Spinner for Svelte

Usage

install

npm install svelte-loading

showLoading

<script lang='ts'>
  import { showLoading } from 'svelte-loading';

  showLoading()

</script>

if you want hide loading component you must call hideLoading method.

auto hideLoading

showLoading({ duration: 2000 })

after 2 seconds loading will auto hide

change loading color

showLoading({ color: '#FFF'})

change loading style

import { showLoading, LoadingEnum } from 'svelte-loading';

showLoading({ type: LoadingEnum.Infinity })

Loading Styles

Eclipes

Infinity

Ring

Ripple

Spinner (default)

Svelte

App.svelte

<script lang='ts'>
  import { Loading, showLoading, LoadingEnum } from 'svelte-loading';

  showLoading()

</script>

...

<Loading />

Options

export enum LoadingEnum {
  Eclipes,
  Infinity,
  Ring,
  Ripple,
  Spinner
}

export type LoadingTypes = {
  size?: string | number
  color?: string
  duration?: number
  type?: LoadingEnum
}