Skip to content

lenniezelk/solid-spinner

Repository files navigation

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 [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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published