https://github.com/donavon/react-wobbly-spinner
A Wobbly Spinner Component for React
https://github.com/donavon/react-wobbly-spinner
Last synced: about 2 months ago
JSON representation
A Wobbly Spinner Component for React
- Host: GitHub
- URL: https://github.com/donavon/react-wobbly-spinner
- Owner: donavon
- License: mit
- Created: 2016-05-26T21:51:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-01-18T15:11:07.000Z (over 3 years ago)
- Last Synced: 2025-07-01T07:07:13.516Z (3 months ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-wobbly-spinner
[](https://travis-ci.org/donavon/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 `` 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](https://github.com/jsstyles/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](https://codepen.io/donavon/full/pbzOVR/).
## 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.
```javascript
import WobblySpinner from "react-wobbly-spinner";
class App extends React.Component {
render() {
return (
Loading...
);
}
}
var root = document.querySelector(".main");
ReactDOM.render(, root);
```
A little too colorful for your taste? Try this grayscale version.
```xml
```
Want a simple 3/4 circle spinner (i.e. no "wobble")?
```xml
```