svelte-spins

loaders.css as Svelte components.

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

Demo

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