Svelte Spins

ksmarty

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

#svelte #javascript #component #sveltejs

Want a Svelte site built?

Hire a Svelte developer

Demo Download

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

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Want a Svelte site built?

Hire a Svelte developer