Solid Spinner

Dependency free SolidJS adaptation of Sam Herberts SVG Loaders library.

:purple_heart: 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 [email protected]:lenniezelk/solid-spinner.git
# cd into project directory
cd solid-spinner
# install packages
pnpm install

Test

pnpm test

Build for production

pnpm build