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
.
See more details in demo
directory or visit website
npm install --save respinner
Just import it when use with react. Issues go to issues.
import React from 'react'
import {
BeatLoading, BounceLoading, CircularLoading,
ClockLoading, RotateLoading, SpinLoading,
WaveLoading, DashLoading, CopperLoading
} from 'respinner'
function LoadingComponents() {
<div className="spinners">
<SpinLoading fill="#777" borderRadius={4} count={12} /> // use with customized props
<CircularLoading /> // or just use with default props
</div>
}
// pre-define a spinner
<SpinLoading borderRadius={2} count={10} id="spin" />
// reuse them
<svg width="40"><use href="#spin" fill="#fff" /></svg>
<svg width="40"><use href="#spin" fill="#fff" /></svg>
Any SVG props could be used in these components. The following are the default props for these components:
-
gap
:6
-
size
:8
-
count
:6
-
duration
:0.8
-
size
:40
-
strokeWidth
:4
-
linecap
:'round'
-
gap
:6
-
count
:4
-
barWidth
:4
-
barHeight
:16
-
duration
:0.8
-
size
:40
-
opacity
:0.2
-
strokeWidth
:4
-
size
:40
-
count
:8
-
barWidth
:4
-
duration
:1
-
barHeight
:10
-
borderRadius
:1
-
size
:40
-
count
:3
-
duration
:1.5
-
strokeWidth
:2
-
size
:40
-
duration
:2
-
strokeWidth
:2
-
size
:40
-
duration
:1.8
-
strokeWidth
:4
-
size
:40
-
strokeWidth
:4
pnpm install
pnpm dev
# see demo in http://localhost:3000
pnpm run build # build lib
pnpm run build:docs # build docs
MIT