huozhi / respinner Goto Github PK

Pretty and customizable svg spinners for React.js

JavaScript 100.00%

svg spinner react loading loading-spinner loading-animations pure-javascript

respinner's Introduction

Respinner

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.

Examples

See more details in demo directory or visit website

Usage

npm install --save respinner

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

Basic

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

Use with SVG `use`

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

API

Any SVG props could be used in these components. The following are the default props for these components:

1. BeatLoading

gap: 6
size: 8
count: 6
duration: 0.8

2. CircularLoading

size: 40
strokeWidth: 4
linecap: 'round'

3. BounceLoading

gap: 6
count: 4
barWidth: 4
barHeight: 16
duration: 0.8

4. RotateLoading

size: 40
opacity: 0.2
strokeWidth: 4

5. SpinLoading

size: 40
count: 8
barWidth: 4
duration: 1
barHeight: 10
borderRadius: 1

6. WaveLoading

size: 40
count: 3
duration: 1.5
strokeWidth: 2

7. ClockLoading

size: 40
duration: 2
strokeWidth: 2

8. DashLoading

size: 40
duration: 1.8
strokeWidth: 4

9. CopperLoading

size: 40
strokeWidth: 4

Development

pnpm install
pnpm dev

# see demo in http://localhost:3000

Build

pnpm run build # build lib
pnpm run build:docs # build docs

License

MIT

respinner's People

Contributors

Stargazers

Watchers

Forkers

sandeepchugh9 frankfenghua amrutakadam2013 gary1592 ichenwin loft-vad windaw2k

respinner's Issues

Not working with nextjs (client side rendering)

im using version 3.0.5

also, props are not available in the autocomplete, the editor shows this:

Uncaught Error: Element type is invalid

I get above error when using this component. Detailed console output and package.json gist below.

Steps to reproduce:

create-react-app my-respinner
cd my-respinner
yarn add respinner
yarn start, confirming it's working so far
edit src/App.js to include import CircularLoader from 'respinner/lib/CircularLoader' at top and <CircularLoader stroke="#666" /> inside render
error; open browser devtools

Console output:

warning.js:36Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `App`.
printWarning @ warning.js:36
invariant.js:51Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
    at invariant (invariant.js:44)
    at instantiateReactComponent (instantiateReactComponent.js:68)
    at instantiateChild (ReactChildReconciler.js:44)
    at ReactChildReconciler.js:71
    at traverseAllChildrenImpl (traverseAllChildren.js:77)
    at traverseAllChildren (traverseAllChildren.js:172)
    at Object.instantiateChildren (ReactChildReconciler.js:70)
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:226)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:691)
ReactDOMComponentTree.js:106Uncaught TypeError: Cannot read property '__reactInternalInstance$xxdbrhkyvixydql4i21olayvi' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:106)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)

(Chrome 55.0 on macOS 10.12.2)

package.json: https://gist.github.com/59a877c4bb157f4f4263cf6eaf7f4bf9

scoped style not work in firefox

SVGEmbeddedStyle use scoped <style /> that blocking CSS works

transform-origin css not work anymore for single svg element like rect

Inconsistent id between server and client during SSR

Currently it’s using the Math.random to generate embeded style id, will receive warning form React when doing SSR

Warning: Text content did not match. Server: "/* <![CDATA[ */@keyframes Beatzkeiijtlk{0%, 80%, 100% {transform: scale(0);}40% {transform: scale(1);}}/* ]]> */" Client: "/* <![CDATA[ */@keyframes Beat31j9jq8s2{0%, 80%, 100% {transform: scale(0);}40% {transform: scale(1);}}/* ]]> */"

SVG properties like rx, x, y not work in CSS animation

Safari CSS animation only supports basic SVG properties like stroke-dasharray, stroke-dashoffset, but not x, rx`. Transformation for shape isn't a good idea yet.