Respinner

!npm-version

> react components for spinners or loaders. Each loader was combined css animation and render dom as svg.
easily controlled by react porps.

You could change the count of spinner's children by props count, also the color of themselves. All of them built with SVG, so you can easily scale them with width and height.

$3

!demo

See more details in demo directory or visit website

$3

``sh
npm install --save respinner
`

Just import it when use with react. Issues go to issues.

#### Basic

`tsx
import React from 'react'
import {
BeatLoading, BounceLoading, CircularLoading,
ClockLoading, RotateLoading, SpinLoading,
WaveLoading, DashLoading, CopperLoading
} from 'respinner'

function LoadingComponents() {



}
`

#### Use with SVG use

`tsx
// pre-define a spinner


// reuse them


`

$3

Any SVG props could be used in these components. All components support a color prop that sets both fill and stroke properties. If color is specified, it takes precedence over fill or stroke props.

The following are the default props for these components:

1. BeatLoading

- gap: 6
- size: 8
- count: 6
- duration: 0.8
- color: Sets fill (prefers color over fill)

2. CircularLoading

- size: 40
- strokeWidth: 4
- linecap: 'round'
- color: Sets stroke (prefers color over stroke)

3. BounceLoading

- gap: 6
- count: 4
- barWidth: 4
- barHeight: 16
- duration: 0.8
- color: Sets fill (prefers color over fill)

4. RotateLoading

- size: 40
- opacity: 0.2
- strokeWidth: 4
- color: Sets stroke (prefers color over stroke)

5. SpinLoading

- size: 40
- count: 8
- barWidth: 4
- duration: 1
- barHeight: 10
- borderRadius: 1
- color: Sets fill (prefers color over fill)

6. WaveLoading

- size: 40
- count: 3
- duration: 1.5
- strokeWidth: 2
- color: Sets stroke (prefers color over stroke)

7. ClockLoading

- size: 40
- duration: 2
- strokeWidth: 2
- color: Sets stroke (prefers color over stroke)

8. DashLoading

- size: 40
- duration: 1.8
- strokeWidth: 4
- color: Sets stroke (prefers color over stroke)

9. CopperLoading

- size: 40
- strokeWidth: 4
- color: Sets both fill and stroke (prefers color over fill/stroke)

$3

`sh
pnpm install
pnpm dev

see demo in http://localhost:3000


`

$3

`sh
pnpm run build # build lib
pnpm run build:docs # build docs
``

$3

MIT