Pure SVG loading spinners for SolidJS
npm install solid-spinnerDependency free SolidJS adaptation of Sam Herberts SVG Loaders library.
:purple_heart: View Spinners
- 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
``bash`
yarn add solid-spinner
`bash`
npm install solid-spinner --save
`bash`
pnpm install solid-spinner
`jsx
import { Spinner, SpinnerType } from 'solid-spinner';
`
`jsx
import { Puff } from 'solid-spinner';
`
| 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 |
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
`
`bash`clone repo
git clone git@github.com:lenniezelk/solid-spinner.gitcd into project directory
cd solid-spinnerinstall packages
pnpm install
`bash`
pnpm test
`bash``
pnpm build