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.
; Component { return <div> <WobblySpinner diameter=30 /> <span>Loading...</span> </div> ; } var root = document;ReactDOM;
A little too colorful for your taste? Try this grayscale version.
Want a simple 3/4 circle spinner (i.e. no "wobble")?