├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── Spinner.js
├── __snapshots__
    └── test.js.snap
├── docs
    ├── build.js
    └── index.html
├── package.json
└── test.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "env",
4 |     "stage-0",
5 |     "react"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | __snapshots__
2 | docs
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Respin
 3 | 
 4 | React SVG loading spinner based on jxnblk.com/loading
 5 | 
 6 | ```sh
 7 | npm i respin
 8 | ```
 9 | 
10 | ```js
11 | const React = require('react')
12 | const Spinner = require('respin')
13 | 
14 | const MyComponent = props => (
15 |   <div>
16 |     <Spinner /> Loading...
17 |   </div>
18 | )
19 | ```
20 | 
21 | ## Props
22 | 
23 | - `size = 16` - (number) - width and height in pixels
24 | - `duration = 1000` - (number) - duration of animation in milliseconds
25 | - `spokes = 8` - (number) - number of spokes in spinner
26 | 
27 | Respin passes all other props to the root `<svg>` element.
28 | 
29 | MIT License
30 | 
31 | 


--------------------------------------------------------------------------------
/Spinner.js:
--------------------------------------------------------------------------------
 1 | const React = require('react')
 2 | 
 3 | module.exports = props => {
 4 |   const {
 5 |     size = 16,
 6 |     spokes = 8,
 7 |     duration = 1000,
 8 |     ...rest
 9 |   } = props
10 | 
11 |   return (
12 |     <svg
13 |       viewBox='0 0 32 32'
14 |       width={size}
15 |       height={size}
16 |       style={style}
17 |       fill='currentcolor'
18 |       {...rest}>
19 |       {getPaths(spokes, duration)}
20 |     </svg>
21 |   )
22 | }
23 | 
24 | const getPaths = (length, dur) => Array.from({ length })
25 |   .map((n, i) => (
26 |     <path
27 |       key={i}
28 |       opacity={0.1}
29 |       d='M14 0 H18 V8 H14z'
30 |       transform={`rotate(${i * 360 / length} 16 16)`}
31 |     >
32 |       <animate
33 |         attributeName='opacity'
34 |         from={1}
35 |         to={0.1}
36 |         dur={dur + 'ms'}
37 |         repeatCount='indefinite'
38 |         begin={(i * dur / length) + 'ms'}
39 |       />
40 |     </path>
41 |   ))
42 | 
43 | const style = {
44 |   display: 'inline-flex',
45 |   margin: 0
46 | }
47 | 


--------------------------------------------------------------------------------
/__snapshots__/test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`snapshot 1`] = `
  4 | <svg
  5 |   fill="currentcolor"
  6 |   height={16}
  7 |   style={
  8 |     Object {
  9 |       "display": "inline-flex",
 10 |       "margin": 0,
 11 |     }
 12 |   }
 13 |   viewBox="0 0 32 32"
 14 |   width={16}
 15 | >
 16 |   <path
 17 |     d="M14 0 H18 V8 H14z"
 18 |     opacity={0.1}
 19 |     transform="rotate(0 16 16)"
 20 |   >
 21 |     <animate
 22 |       attributeName="opacity"
 23 |       begin="0ms"
 24 |       dur="1000ms"
 25 |       from={1}
 26 |       repeatCount="indefinite"
 27 |       to={0.1}
 28 |     />
 29 |   </path>
 30 |   <path
 31 |     d="M14 0 H18 V8 H14z"
 32 |     opacity={0.1}
 33 |     transform="rotate(45 16 16)"
 34 |   >
 35 |     <animate
 36 |       attributeName="opacity"
 37 |       begin="125ms"
 38 |       dur="1000ms"
 39 |       from={1}
 40 |       repeatCount="indefinite"
 41 |       to={0.1}
 42 |     />
 43 |   </path>
 44 |   <path
 45 |     d="M14 0 H18 V8 H14z"
 46 |     opacity={0.1}
 47 |     transform="rotate(90 16 16)"
 48 |   >
 49 |     <animate
 50 |       attributeName="opacity"
 51 |       begin="250ms"
 52 |       dur="1000ms"
 53 |       from={1}
 54 |       repeatCount="indefinite"
 55 |       to={0.1}
 56 |     />
 57 |   </path>
 58 |   <path
 59 |     d="M14 0 H18 V8 H14z"
 60 |     opacity={0.1}
 61 |     transform="rotate(135 16 16)"
 62 |   >
 63 |     <animate
 64 |       attributeName="opacity"
 65 |       begin="375ms"
 66 |       dur="1000ms"
 67 |       from={1}
 68 |       repeatCount="indefinite"
 69 |       to={0.1}
 70 |     />
 71 |   </path>
 72 |   <path
 73 |     d="M14 0 H18 V8 H14z"
 74 |     opacity={0.1}
 75 |     transform="rotate(180 16 16)"
 76 |   >
 77 |     <animate
 78 |       attributeName="opacity"
 79 |       begin="500ms"
 80 |       dur="1000ms"
 81 |       from={1}
 82 |       repeatCount="indefinite"
 83 |       to={0.1}
 84 |     />
 85 |   </path>
 86 |   <path
 87 |     d="M14 0 H18 V8 H14z"
 88 |     opacity={0.1}
 89 |     transform="rotate(225 16 16)"
 90 |   >
 91 |     <animate
 92 |       attributeName="opacity"
 93 |       begin="625ms"
 94 |       dur="1000ms"
 95 |       from={1}
 96 |       repeatCount="indefinite"
 97 |       to={0.1}
 98 |     />
 99 |   </path>
100 |   <path
101 |     d="M14 0 H18 V8 H14z"
102 |     opacity={0.1}
103 |     transform="rotate(270 16 16)"
104 |   >
105 |     <animate
106 |       attributeName="opacity"
107 |       begin="750ms"
108 |       dur="1000ms"
109 |       from={1}
110 |       repeatCount="indefinite"
111 |       to={0.1}
112 |     />
113 |   </path>
114 |   <path
115 |     d="M14 0 H18 V8 H14z"
116 |     opacity={0.1}
117 |     transform="rotate(315 16 16)"
118 |   >
119 |     <animate
120 |       attributeName="opacity"
121 |       begin="875ms"
122 |       dur="1000ms"
123 |       from={1}
124 |       repeatCount="indefinite"
125 |       to={0.1}
126 |     />
127 |   </path>
128 | </svg>
129 | `;
130 | 


--------------------------------------------------------------------------------
/docs/build.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const path = require('path')
 3 | const React = require('react')
 4 | const { renderToStaticMarkup } = require('react-dom/server')
 5 | const Spinner = require('../Spinner')
 6 | 
 7 | const App = () => (
 8 |   <html>
 9 |     <style dangerouslySetInnerHTML={{ __html: css }} />
10 |     <Spinner />
11 |     <h1>
12 |       <a href='https://github.com/jxnblk/respin'>
13 |         Respin
14 |       </a>
15 |     </h1>
16 |   </html>
17 | )
18 | 
19 | const css = `*{box-sizing:border-box}
20 | body{
21 |   font-family:-apple-system,BlinkMacSystemFont,sans-serif;
22 |   margin:0;
23 |   padding:32px;
24 |   display:flex;
25 |   flex-direction:column;
26 |   align-items:center;
27 |   justify-content:center;
28 |   min-height:100vh;
29 | }
30 | a{color:inherit}`
31 | 
32 | const html = renderToStaticMarkup(<App />)
33 | 
34 | const filename = path.join(__dirname, 'index.html')
35 | fs.writeFileSync(filename, `<!DOCTYPE html>${html}`)
36 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><style>*{box-sizing:border-box}
 2 | body{
 3 |   font-family:-apple-system,BlinkMacSystemFont,sans-serif;
 4 |   margin:0;
 5 |   padding:32px;
 6 |   display:flex;
 7 |   flex-direction:column;
 8 |   align-items:center;
 9 |   justify-content:center;
10 |   min-height:100vh;
11 | }
12 | a{color:inherit}</style><svg viewBox="0 0 32 32" width="16" height="16" style="display:inline-flex;margin:0;" fill="currentcolor"><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(0 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="0ms"></animate></path><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(45 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="125ms"></animate></path><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(90 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="250ms"></animate></path><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(135 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="375ms"></animate></path><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(180 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="500ms"></animate></path><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(225 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="625ms"></animate></path><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(270 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="750ms"></animate></path><path opacity="0.1" d="M14 0 H18 V8 H14z" transform="rotate(315 16 16)"><animate attributeName="opacity" from="1" to="0.1" dur="1000ms" repeatCount="indefinite" begin="875ms"></animate></path></svg><h1><a href="https://github.com/jxnblk/respin">Respin</a></h1></html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "respin",
 3 |   "version": "1.0.1",
 4 |   "description": "React SVG loading spinner based on jxnblk.com/loading",
 5 |   "main": "dist/Spinner.js",
 6 |   "scripts": {
 7 |     "prepublish": "babel Spinner.js --out-dir dist",
 8 |     "docs": "babel-node docs/build",
 9 |     "test": "ava"
10 |   },
11 |   "keywords": [
12 |     "react",
13 |     "react-component",
14 |     "spinner",
15 |     "loading",
16 |     "loading-indicator"
17 |   ],
18 |   "author": "Brent Jackson",
19 |   "license": "MIT",
20 |   "devDependencies": {
21 |     "ava": "^0.19.1",
22 |     "babel-cli": "^6.24.1",
23 |     "babel-core": "^6.24.1",
24 |     "babel-preset-env": "^1.4.0",
25 |     "babel-preset-react": "^6.24.1",
26 |     "babel-preset-stage-0": "^6.24.1",
27 |     "babel-register": "^6.24.1",
28 |     "react": "^15.5.4",
29 |     "react-dom": "^15.5.4",
30 |     "react-test-renderer": "^15.5.4"
31 |   },
32 |   "ava": {
33 |     "require": [
34 |       "babel-register"
35 |     ],
36 |     "babel": "inherit"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | const test = require('ava')
 2 | const React = require('react')
 3 | const render = require('react-test-renderer').create
 4 | const Spinner = require('./Spinner')
 5 | 
 6 | test('snapshot', t => {
 7 |   const tree = render(<Spinner />).toJSON()
 8 |   t.snapshot(tree)
 9 | })
10 | 


--------------------------------------------------------------------------------