svelte-spins

A zero dependency spinner library using loaders.css as Svelte components.
Built by Kyle Schwartz
View on GitHub
Install
Bun:
bun i svelte-spins
npm:
npm i svelte-spins
pnpm:
pnpm i svelte-spins
Yarn:
yarn add svelte-spins
Usage
<script lang="ts">
  import { BallPulseSync } from "svelte-spins";

  let color = "red";
  let classes = "button-loader";
  let style="background: green; padding: 3rem;";
</script>

<BallPulseSync {color} {style} />
API

All props are optional

NameValueDefaultFunction
classesstringnullCSS classes
stylestringnullInline styles
colorstringblackForeground color


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