react-wobbly-spinner

A Wobbly Spinner Component for React. The most highly over-engineered UI spinner component in the course of human history!

You want a spinner on your React powered site, but you aren't a CSS or SVG genius. What is a React developer to do? You simply drop in React <WobblySpinner/> component and your problems are solved.

Everything is controlled by props. No need to edit CSS files. In fact, Wobbly Spinner doesn't use them! We make good use of JSS and intelligently manage the dynamic attaching/detaching of style sheets to/from the DOM as needed. If you have multiple Wobbly Spinners mounted, they will share a style sheet if the props are the same. If they have different props, Wobbly Spinner will attach a unique style sheet.

How do I get it?

npm i react-wobbly-spinner --save

See it Live!

You can see it live and try it out on this Codepen.

Properties

Wobbly Spinner supports these props:

| prop | description | | :----- | :------------ | | diameter | The diameter of the spinner in pixels. (default=62) | | thickness | The thickness of each line in pixels. (default=1) | | wobbleOffset | The offset from center that the "wobble" arc spins in pixels. (default=1) | | spinRate | The rate to complete a full rotation in msecs. (default=1000) | | outerColor | The outer circle color (default = yellow) | | innerColor | The outer partial circle color (default = magenta) | | wobbleColor | The wobble partial circle color (default = cyan) |

Sample Use

Here is an example of rendering the Wobbly Spinner in a simple Hello World React app.

import WobblySpinner from "react-wobbly-spinner";

class App extends React.Component {
  render() {
    return (
      <div>
        <WobblySpinner diameter={30} />
        <span>Loading...</span>
      </div>
    );       
  }
}

var root = document.querySelector(".main");
ReactDOM.render(<App />, root);

A little too colorful for your taste? Try this grayscale version.

<WobblySpinner outerColor="#666" innerColor="#999" wobbleColor="#ccc"/>

Want a simple 3/4 circle spinner (i.e. no "wobble")?

<WobblySpinner thickness={5} outerColor="transparent" innerColor="white" wobbleColor="transparent"/>