├── example
├── .gitattributes
├── index.jsx
├── index.html
└── component.jsx
├── .gitignore
├── .npmignore
├── server.js
├── bower.json
├── index.jsx
├── react-spinner.css
├── webpack.prod.config.js
├── webpack.config.js
├── README.md
└── package.json
/example/.gitattributes:
--------------------------------------------------------------------------------
1 | bundle.js binary
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | bower_components
3 | node_modules
4 | build
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /.*
2 |
3 | /bower_components/
4 | /bower.json
5 |
6 | /example/
7 | /*.sublime-project
8 | /*.sublime-workspace
9 |
--------------------------------------------------------------------------------
/example/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './component';
4 |
5 | ReactDOM.render(, document.querySelector('#content'));
6 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/example/component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Spinner from '../index.jsx';
3 |
4 | class App extends React.Component {
5 | render() {
6 | const style = {
7 | height: 50,
8 | width: 50,
9 | backgroundColor: 'black'
10 | };
11 | return (
12 |
13 |
14 |
15 | );
16 | }
17 | };
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var WebpackDevServer = require('webpack-dev-server');
3 | var config = require('./webpack.config');
4 |
5 | new WebpackDevServer(webpack(config), {
6 | publicPath: config.output.publicPath,
7 | hot: true,
8 | stats: {
9 | chunkModules: false,
10 | colors: true,
11 | },
12 | }).listen(3000, 'localhost', function (err) {
13 | if (err) {
14 | console.log(err);
15 | }
16 |
17 | console.log('Listening at localhost:3000');
18 | });
19 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-spinner",
3 | "version": "0.2.7",
4 | "author": "chenglou ",
5 | "description": "Zero configuration loading spinner.",
6 | "main": "build/index.js",
7 | "ignore": [
8 | "**/.*",
9 | "node_modules",
10 | "bower_components",
11 | "test",
12 | "tests",
13 | "example",
14 | "package.json"
15 | ],
16 | "keywords": [
17 | "facebook",
18 | "react",
19 | "spin",
20 | "spinner",
21 | "loading",
22 | "react-component"
23 | ],
24 | "dependencies": {
25 | "react": ">=0.12.0"
26 | },
27 | "license": "MIT"
28 | }
29 |
--------------------------------------------------------------------------------
/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class Spinner extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | }
7 | render() {
8 | let bars = [];
9 | const props = this.props;
10 |
11 | for (let i = 0; i < 12; i++) {
12 | let barStyle = {};
13 | barStyle.WebkitAnimationDelay = barStyle.animationDelay =
14 | (i - 12) / 10 + 's';
15 |
16 | barStyle.WebkitTransform = barStyle.transform =
17 | 'rotate(' + (i * 30) + 'deg) translate(146%)';
18 |
19 | bars.push(
20 |
21 | );
22 | }
23 |
24 | return (
25 |
26 | {bars}
27 |
28 | );
29 | }
30 | };
31 |
32 | export default Spinner;
33 |
--------------------------------------------------------------------------------
/react-spinner.css:
--------------------------------------------------------------------------------
1 | .react-spinner {
2 | position: relative;
3 | width: 32px;
4 | height: 32px;
5 | top: 50%;
6 | left: 50%;
7 | }
8 |
9 | .react-spinner_bar {
10 | -webkit-animation: react-spinner_spin 1.2s linear infinite;
11 | -moz-animation: react-spinner_spin 1.2s linear infinite;
12 | animation: react-spinner_spin 1.2s linear infinite;
13 | border-radius: 5px;
14 | background-color: white;
15 | position: absolute;
16 | width: 20%;
17 | height: 7.8%;
18 | top: -3.9%;
19 | left: -10%;
20 | }
21 |
22 | @keyframes react-spinner_spin {
23 | 0% { opacity: 1; }
24 | 100% { opacity: 0.15; }
25 | }
26 |
27 | @-moz-keyframes react-spinner_spin {
28 | 0% { opacity: 1; }
29 | 100% { opacity: 0.15; }
30 | }
31 |
32 | @-webkit-keyframes react-spinner_spin {
33 | 0% { opacity: 1; }
34 | 100% { opacity: 0.15; }
35 | }
36 |
--------------------------------------------------------------------------------
/webpack.prod.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 |
3 | // currently, this is for bower
4 | var config = {
5 | devtool: 'sourcemap',
6 | entry: {
7 | index: './index.jsx',
8 | },
9 | output: {
10 | path: path.join(__dirname, 'build'),
11 | publicPath: './build',
12 | filename: 'index.js',
13 | sourceMapFilename: 'index.map',
14 | library: 'Spinner',
15 | libraryTarget: 'umd',
16 | },
17 | module: {
18 | loaders: [{
19 | test: /\.(js|jsx)/,
20 | loader: 'babel',
21 | }],
22 | },
23 | plugins: [],
24 | resolve: {
25 | extensions: ['', '.js', '.jsx'],
26 | },
27 | externals: {
28 | 'react': {
29 | root: 'React',
30 | commonjs2: 'react',
31 | commonjs: 'react',
32 | amd: 'react',
33 | },
34 | },
35 | };
36 |
37 | module.exports = config;
38 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | var entry = ['./example/index.jsx'];
5 |
6 | if (process.env.NODE_ENV === 'development') {
7 | entry = entry.concat([
8 | 'webpack-dev-server/client?http://localhost:3000',
9 | 'webpack/hot/only-dev-server',
10 | ]);
11 | }
12 |
13 | module.exports = {
14 | devtool: 'eval',
15 | entry: entry,
16 | output: {
17 | path: path.join(__dirname, 'example'),
18 | filename: 'bundle.js',
19 | publicPath: '/example/',
20 | },
21 | plugins: [
22 | new webpack.HotModuleReplacementPlugin(),
23 | new webpack.NoErrorsPlugin(),
24 | ],
25 | resolve: {
26 | extensions: ['', '.js', '.jsx'],
27 | },
28 | module: {
29 | loaders: [{
30 | test: /\.jsx?$/,
31 | loaders: ['react-hot', 'babel'],
32 | exclude: /build|lib|node_modules/,
33 | }],
34 | },
35 | };
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [React](http://facebook.github.io/react/)-spinner
2 |
3 | Zero configuration loading spinner.
4 |
5 | [Live demo](https://rawgit.com/chenglou/react-spinner/master/example/index.html) from the example folder. (To build it locally, clone this repo, `npm install && npm start` then open http://localhost:3000/example/)
6 |
7 | ## install
8 |
9 | Bower:
10 | ```sh
11 | bower install react-spinner
12 | ```
13 |
14 | Npm:
15 | ```sh
16 | npm install react-spinner
17 | ```
18 |
19 | Plain old script tag:
20 | ```html
21 |
22 | ```
23 |
24 | (Compatible with CommonJS, e.g. Browserify.)
25 |
26 | The CSS file:
27 | ```html
28 |
29 | ```
30 |
31 | The spinner
32 |
33 | ## API
34 |
35 | #### <Spinner />
36 | Adds the spinner, which centers itself based on its container's dimensions. If those are not predefined, simply manually center it by adding more style rules to the exposed `.react-spinner` class [here](https://github.com/chenglou/react-spinner/blob/master/react-spinner.css#L1-L7).
37 |
38 | You can also override the `.react-spinner`'s `width` and `height` if you want a bigger or smaller spinner. Everything resizes correctly.
39 |
40 | ## License
41 |
42 | MIT.
43 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-spinner",
3 | "version": "0.2.7",
4 | "description": "Zero configuration loading spinner.",
5 | "main": "build/index.js",
6 | "scripts": {
7 | "start": "NODE_ENV=development node server.js",
8 | "compile-example-for-readme": "webpack",
9 | "test": "echo \"Error: no test specified\" && exit 1",
10 | "prerelease": "NODE_ENV=production webpack --config webpack.prod.config.js"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/chenglou/react-spinner.git"
15 | },
16 | "keywords": [
17 | "facebook",
18 | "react",
19 | "spin",
20 | "spinner",
21 | "loading",
22 | "react-component"
23 | ],
24 | "author": "chenglou ",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/chenglou/react-spinner/issues"
28 | },
29 | "homepage": "https://github.com/chenglou/react-spinner",
30 | "peerDependencies": {
31 | "react": ">=0.12.1"
32 | },
33 | "example": {
34 | "script": "example/spin.jsx",
35 | "style": "react-spinner.css"
36 | },
37 | "devDependencies": {
38 | "babel-loader": "^5.3.1",
39 | "babel": "^5.8.23",
40 | "webpack-dev-server": "^1.10.1",
41 | "react-dom": ">=15.0.0",
42 | "react": ">=15.0.0",
43 | "react-hot-loader": "^1.3.0",
44 | "webpack": "^1.10.1"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------