https://github.com/KyleAMathews/react-spinkit
A collection of loading indicators animated with CSS for React
https://github.com/KyleAMathews/react-spinkit
Last synced: about 1 month ago
JSON representation
A collection of loading indicators animated with CSS for React
- Host: GitHub
- URL: https://github.com/KyleAMathews/react-spinkit
- Owner: KyleAMathews
- License: mit
- Created: 2014-08-11T18:01:20.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T14:39:31.000Z (over 2 years ago)
- Last Synced: 2025-02-14T10:50:52.195Z (2 months ago)
- Language: CSS
- Homepage: http://kyleamathews.github.io/react-spinkit/
- Size: 2.88 MB
- Stars: 1,493
- Watchers: 17
- Forks: 73
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - react-spinkit - A collection of loading indicators animated with CSS for React (Uncategorized / Uncategorized)
- awesome-react-components-all - react-spinkit - A collection of loading indicators animated with CSS for React. (Uncategorized / Uncategorized)
- awesome-react - react-spinkit - A collection of loading indicators animated with CSS for React (Uncategorized / Uncategorized)
- awesome-learning-resources - react-spinkit - A collection of loading indicators animated with CSS for React (Uncategorized / Uncategorized)
- awesome-list - react-spinkit - A collection of loading indicators animated with CSS for React. (Demos / Loader)
- awesome-react-components - react-spinkit - A collection of loading indicators animated with CSS for React. (UI Components / Loader)
- awesome-react-components - react-spinkit - A collection of loading indicators animated with CSS for React. (UI Components / Loader)
- awesome-react - react-spinkit - A collection of loading indicators animated with CSS for React (React [🔝](#readme))
README
react-spinkit
=============
A collection of loading indicators animated with CSS for React
Currently I've ported all the spinner animations from
[Spinkit](https://github.com/tobiasahlin/SpinKit). If you have other favorite
css spinner you'd like to include, open an issue.
## Install
```console
$ npm install react-spinkit --save
```
## Usage
```javascript
var Spinner = require('react-spinkit');
```
See more examples on the [demo page](http://kyleamathews.github.io/react-spinkit/).
## CSS
CSS is loaded automatically when using [Webpack](http://webpack.github.io) with the
[css-loader](https://github.com/webpack/css-loader) and [style-loader](https://github.com/webpack/style-loader), or Browserify/[CSSify](https://github.com/davidguttman/cssify)
to build your project.
## External spinners
This also includes most of the spinners from [loaders.css](https://github.com/ConnorAtherton/loaders.css). Note that while
all of the native spinners from Spinkit are contained within their bounding divs,
some of the loaders.css spinners have a zero-sized parent div and extend outward
from that (as you can see on the demos page). Regardless of this, they are all
easily centerable with flexbox.
## Webpack or Browserify is required
Currently we only support Browserify and Webpack. If you'd like support
for other build tools that also support requiring CSS, PRs are welcome.
## Fades in spinners after one second
According to [research by Jakob Nielsen](http://www.nngroup.com/articles/response-times-3-important-limits/),
feedback after user operations isn't necessary for about a second so by
default, react-spinkit will fade in your spinner at one second. Nevertheless,
you can configure spinner fade-in behavior with the `fadeIn` prop, which
accepts values `full` (the default), `half`, `quarter`, and `none` for one
second, a half second, a quarter second, and no fade in, respectively.
For example: ``.
## PropTypes
* **name**—specify spinner to use (defaults to `three-bounce`).
* **fadeIn**-set the time before the spinner fades in.
* **overrideSpinnerClassName**—change the default `sk-spinner` className.
* **className**-add a custom classname to the outer div.
* **color**-programmatically set the color of the spinners; this can either be a
hex value or a color word.
## Server-side rendering
If you want to use this for server-side rendering, set
`process.env.REACT_SPINKIT_NO_STYLES` in your server build environment,
in webpack via `webpack.DefinePlugin`, or whatever is appropriate to your
build process. This will skip the import of styles and allow evaluation of
the SpinKit code in node.
## Demo and documentation
http://kyleamathews.github.io/react-spinkit/