Solid Spinner

Dependency free SolidJS adaptation of Sam Herberts SVG Loaders library.

💜 View Spinners

✨ Features

• 12 Spinners totally ready to use.
• Customizable - receive props to extend their usefulness.
• First class TypeScript support
• Tree shakeable: What you take is what you get.
• Reactivity, take advantage of SolidJS to react to changes in props.
• Just import and declare in your JSX to work out-the-box

📦 Installation

Yarn

yarn add solid-spinner

NPM

npm install solid-spinner --save

PNPM

pnpm install solid-spinner

Usage

Import Spinner component and specify the type of spinner.

import { Spinner, SpinnerType } from 'solid-spinner';

<Spinner type={SpinnerType.puff} color="red" />;

Import individual component.

import { Puff } from 'solid-spinner';

<Puff color="red" />;

Spinners

Component Name	Type
AudioSpinner	audio
BallTriangle	ballTriangle
Bars	bars
Circles	circles
Grid	grid
Hearts	hearts
Oval	oval
Puff	puff
Rings	rings
SpinningCircles	spinningCircles
TailSpin	tailSpin
ThreeDots	threeDots

Customizable

Each of these components should be able to accept any SVG tag presentation attributes as props.

// render the Puff loader with a stroke opacity of .125
<Spinner type={SpinnerType.puff} stroke-opacity=".125" />

// render the Puff loader with a stroke of mint green
<Puff stroke="#98ff98" />

// render the Puff loader with a stroke of mint green and a stroke opactiy of .125
<Puff stroke="#98ff98" stroke-opacity=".125"/>

Development

# clone repo
git clone git@github.com:lenniezelk/solid-spinner.git
# cd into project directory
cd solid-spinner
# install packages
pnpm install

Test

pnpm test

Build for production

pnpm build