Skip to content

A zero dependency spinner/loader library using loaders.css as Svelte components.

License

Notifications You must be signed in to change notification settings

ksmarty/svelte-spins

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svelte-spins

loaders.css as Svelte components.

A zero dependency spinner/loader library using loaders.css as Svelte components.

Install

svelte-spins can be installed using yarn or npm.

yarn add svelte-spins
npm i svelte-spins

Usage

<script>
  import { BallPulseSync } from "svelte-spins";
  let color = "red";
  let classes = "button-loader";
  let style="background: green; padding: 3rem;";

</script>

<BallPulseSync {color} {classes} {style} />

API

Props

All props are optional.

Name Value Default Value Function
classes string null Classes to be applied
style string null Inline styles to be applied
color string black The foreground color of the loader

Loaders

  • BallBeat
  • BallClipRotate
  • BallClipRotateMultiple
  • BallClipRotatePulse
  • BallGridBeat
  • BallGridPulse
  • BallPulse
  • BallPulseRise
  • BallPulseSync
  • BallRotate
  • BallScale
  • BallScaleMultiple
  • BallScaleRipple
  • BallScaleRippleMultiple
  • BallSpinFadeLoader
  • BallTrianglePath
  • BallZigZag
  • BallZigZagDeflect
  • CubeTransition
  • LineScale
  • LineScaleParty
  • LineScalePulseOut
  • LineScalePulseOutRapid
  • LineSpinFadeLoader
  • Pacman
  • SemiCircleSpin
  • SquareSpin
  • TriangleSkewSpin

License

MIT