svelte-spins

A zero dependency spinner/loader library using loaders.css as Svelte components.
Built by Kyle Schwartz
View on GitHub
Install
svelte-spins can be installed using yarn or npm.
Yarn:
yarn add svelte-spins
NPM:
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} {style} />
API

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
BallRotate
BallScale
BallScaleMultiple
BallScaleRipple
BallScaleRippleMultiple
BallSpinFadeLoader
BallTrianglePath
BallZigZag
BallZigZagDeflect
LineScale
LineScaleParty
LineScalePulseOut
LineScalePulseOutRapid
LineSpinFadeLoader
Pacman
SemiCircleSpin
SquareSpin
TriangleSkewSpin
License
© 2025 Kyle Schwartz