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.
<Spinner type={SpinnerType.puff} stroke-opacity=".125" />
<Puff stroke="#98ff98" />
<Puff stroke="#98ff98" stroke-opacity=".125"/>
Development
git clone git@github.com:lenniezelk/solid-spinner.git
cd solid-spinner
pnpm install
Test
pnpm test
Build for production
pnpm build