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

$3

``bash
yarn add solid-spinner
`

$3

`bash
npm install solid-spinner --save
`

$3

`bash
pnpm install solid-spinner
`

Usage

$3

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

;
`

$3

`jsx
import { Puff } from 'solid-spinner';

;
`

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.

`tsx
// render the Puff loader with a stroke opacity of .125


// render the Puff loader with a stroke of mint green


// render the Puff loader with a stroke of mint green and a stroke opactiy of .125

`

Development

`bash


clone repo

git clone git@github.com:lenniezelk/solid-spinner.git

cd into project directory

cd solid-spinner

install packages

pnpm install
`

$3

`bash
pnpm test
`

$3

`bash
pnpm build
``