├── .travis.yml
├── src
    ├── utils
    │   ├── defaults.js
    │   └── animations.js
    ├── components
    │   ├── Bar
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── Circular
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── CubeGrid
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── Cube
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── Block
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── Scale
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── Stretch
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── Pulsate
    │   │   ├── Readme.md
    │   │   └── index.js
    │   ├── DotScale
    │   │   ├── Readme.md
    │   │   └── index.js
    │   └── RotateScale
    │   │   ├── Readme.md
    │   │   └── index.js
    └── index.js
├── .eslintrc.js
├── .stylelintrc
├── lib
    ├── utils
    │   ├── defaults.js
    │   └── animations.js
    ├── components
    │   ├── Block
    │   │   └── index.js
    │   ├── Scale
    │   │   └── index.js
    │   ├── Bar
    │   │   └── index.js
    │   ├── Pulsate
    │   │   └── index.js
    │   ├── Cube
    │   │   └── index.js
    │   ├── RotateScale
    │   │   └── index.js
    │   ├── DotScale
    │   │   └── index.js
    │   ├── Stretch
    │   │   └── index.js
    │   ├── CubeGrid
    │   │   └── index.js
    │   └── Circular
    │   │   └── index.js
    └── index.js
├── .gitignore
├── .babelrc
├── styleguide.config.js
├── LICENSE
├── package.json
└── Readme.md


/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - stable


--------------------------------------------------------------------------------
/src/utils/defaults.js:
--------------------------------------------------------------------------------
1 | export const getSize = size => size || '40px'
2 | 
3 | export const getColor = color => color || '#333'
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: 'flying-rocket',
3 |   rules: {
4 |       "react/require-default-props": 0
5 |     }
6 | };
7 | 


--------------------------------------------------------------------------------
/src/components/Bar/Readme.md:
--------------------------------------------------------------------------------
 1 | ```js
 2 | <Bar />
 3 | ```
 4 | 
 5 | ```js
 6 | <Bar bgBar="#000" color="#f19" />
 7 | ```
 8 | 
 9 | ```js
10 | <Bar duration="1.2s" />
11 | ```
12 | 


--------------------------------------------------------------------------------
/src/components/Circular/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <Circular/>
 4 | ```
 5 | 
 6 | ```js
 7 | <Circular color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <Circular size="100px"/>
12 | ```


--------------------------------------------------------------------------------
/src/components/CubeGrid/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <CubeGrid/>
 4 | ```
 5 | 
 6 | ```js
 7 | <CubeGrid color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <CubeGrid size="100px"/>
12 | ```


--------------------------------------------------------------------------------
/src/components/Cube/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <Cube/>
 4 | ```
 5 | 
 6 | ```js
 7 | <Cube color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <Cube duration="0.2s"/>
12 | ```
13 | 
14 | ```js
15 | <Cube cubeSize="50px"/>
16 | ```


--------------------------------------------------------------------------------
/src/components/Block/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <Block/>
 4 | ```
 5 | 
 6 | ```js
 7 | <Block color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <Block duration="0.2s"/>
12 | ```
13 | 
14 | ```js
15 | <Block size="100px"/>
16 | ```


--------------------------------------------------------------------------------
/src/components/Scale/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <Scale/>
 4 | ```
 5 | 
 6 | ```js
 7 | <Scale color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <Scale duration="0.2s"/>
12 | ```
13 | 
14 | ```js
15 | <Scale size="100px"/>
16 | ```


--------------------------------------------------------------------------------
/src/components/Stretch/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <Stretch/>
 4 | ```
 5 | 
 6 | ```js
 7 | <Stretch color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <Stretch duration="3s"/>
12 | ```
13 | 
14 | ```js
15 | <Stretch size="100px"/>
16 | ```


--------------------------------------------------------------------------------
/src/components/Pulsate/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <Pulsate/>
 4 | ```
 5 | 
 6 | ```js
 7 | <Pulsate color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <Pulsate duration="0.2s"/>
12 | ```
13 | 
14 | ```js
15 | <Pulsate size="100px"/>
16 | ```


--------------------------------------------------------------------------------
/src/components/DotScale/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <DotScale/>
 4 | ```
 5 | 
 6 | ```js
 7 | <DotScale color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <DotScale duration="0.2s"/>
12 | ```
13 | 
14 | ```js
15 | <DotScale dotSize="50px" size="200px"/>
16 | ```


--------------------------------------------------------------------------------
/src/components/RotateScale/Readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ```js
 3 | <RotateScale/>
 4 | ```
 5 | 
 6 | ```js
 7 | <RotateScale color="#BADA55"/>
 8 | ```
 9 | 
10 | ```js
11 | <RotateScale duration="0.2s"/>
12 | ```
13 | 
14 | ```js
15 | <RotateScale size="150px"/>
16 | ```


--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "processors": ["stylelint-processor-styled-components"],
 3 |   "extends": [
 4 |     "stylelint-config-standard",
 5 |     "stylelint-config-styled-components"
 6 |   ],
 7 |   rules: {
 8 |     "indentation": null,
 9 |     "function-name-case": null
10 |   },
11 |   "syntax": "scss"
12 | }


--------------------------------------------------------------------------------
/lib/utils/defaults.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | var getSize = exports.getSize = function getSize(size) {
 7 |   return size || '40px';
 8 | };
 9 | 
10 | var getColor = exports.getColor = function getColor(color) {
11 |   return color || '#333';
12 | };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /.overage
 8 | 
 9 | # production
10 | /build
11 | /styleguide
12 | 
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "presets": [
 3 |         "babel-preset-stage-1",
 4 |         [
 5 |             "env",
 6 |                {
 7 |                 "targets": {
 8 |                         "browsers": [
 9 |                             "last 2 versions",
10 |                             "safari >= 7"
11 |                         ]
12 |                     }
13 |                 }
14 |         ]
15 |     ],
16 | "plugins": [
17 |     [
18 |         "transform-react-jsx",
19 |         {
20 |             "pragma": "h"
21 |         }
22 |     ]
23 | ]
24 | }
25 | 
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export { default as Block } from './components/Block'
 2 | export { default as Circular } from './components/Circular'
 3 | export { default as Cube } from './components/Cube'
 4 | export { default as CubeGrid } from './components/CubeGrid'
 5 | export { default as DotScale } from './components/DotScale'
 6 | export { default as Pulsate } from './components/Pulsate'
 7 | export { default as RotateScale } from './components/RotateScale'
 8 | export { default as Scale } from './components/Scale'
 9 | export { default as Stretch } from './components/Stretch'
10 | export { default as Bar } from './components/Bar'
11 | 


--------------------------------------------------------------------------------
/styleguide.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     components: 'src/components/**/*.js',
 3 |     highlightTheme: 'duotone-dark',
 4 |     title: 'Styled Loaders',
 5 |     webpackConfig: {
 6 |         resolve: {
 7 |             alias: {
 8 |                 react: 'preact-compat',
 9 |                 'react-dom': 'preact-compat'
10 |             }
11 |         },
12 |         module: {
13 |             rules: [
14 |                 {
15 |                     test: /\.jsx?$/,
16 |                     exclude: /node_modules/,
17 |                     loader: 'babel-loader'
18 |                 }
19 |             ]
20 |         }
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | License (MIT)
 2 | 
 3 | Copyright 2017 Sara Vieira <hey@iamsaravieira.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/src/components/Block/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { rotateplane } from '../../utils/animations'
 5 | import { getColor, getSize } from '../../utils/defaults'
 6 | 
 7 | const Block = ({ ...props }) => {
 8 |     /* eslint-disable */
 9 |     const Spinner = styled.div`
10 |         margin: 100px auto;
11 |         animation: ${rotateplane} 1.2s infinite ease-in-out;
12 |         background: ${getColor(props.color)};
13 |         width: ${getSize(props.size)};
14 |         height: ${getSize(props.size)};
15 |         animation-duration: ${props =>
16 |             props.duration ? props.duration : '1.2s'};
17 |     `
18 |     /* eslint-enable */
19 | 
20 |     return <Spinner {...props} />
21 | }
22 | 
23 | export default Block
24 | 
25 | Block.propTypes = {
26 |     /**
27 | 	 * Background of the spinner
28 | 	 * default is #333
29 | 	 */
30 |     color: PropTypes.string,
31 | 
32 |     /**
33 | 	 * Animation duration
34 | 	 * default is 1.2s
35 | 	 */
36 |     duration: PropTypes.string,
37 | 
38 |     /**
39 | 	 * Size of the spinner
40 | 	 * default is 40px
41 | 	 */
42 |     size: PropTypes.string,
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/Scale/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { scale } from '../../utils/animations'
 5 | import { getColor, getSize } from '../../utils/defaults'
 6 | 
 7 | const Scale = ({ ...props }) => {
 8 |     /* eslint-disable */
 9 |     const Spinner = styled.div`
10 |         margin: 100px auto;
11 |         animation: ${scale} 1.2s infinite ease-in-out;
12 |         background: ${getColor(props.color)};
13 |         width: ${getSize(props.size)};
14 |         height: ${getSize(props.size)};
15 |         border-radius: 100%;
16 |         animation-duration: ${props =>
17 |             props.duration ? props.duration : '1.0s'};
18 |     `
19 |     /* eslint-enable */
20 | 
21 |     return <Spinner {...props} />
22 | }
23 | 
24 | export default Scale
25 | 
26 | Scale.propTypes = {
27 |     /**
28 | 	 * Background of the spinner
29 | 	 * default is #333
30 | 	 */
31 |     color: PropTypes.string,
32 | 
33 |     /**
34 | 	 * Animation duration
35 | 	 * default is 1.2s
36 | 	 */
37 |     duration: PropTypes.string,
38 | 
39 |     /**
40 | 	 * Size of the spinner
41 | 	 * default is 40px
42 | 	 */
43 |     size: PropTypes.string,
44 | }
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "styled-loaders",
 3 |   "version": "0.3.0",
 4 |   "main": "lib/index.js",
 5 |   "license": "MIT",
 6 |   "author": "Sara Vieira",
 7 |   "files": [
 8 |     "lib",
 9 |     "Readme.md",
10 |     "package.json",
11 |     "yarn.lock"
12 |   ],
13 |   "scripts": {
14 |     "start": "styleguidist server",
15 |     "build": "styleguidist build",
16 |     "test": "run-s lint:js lint:css compile",
17 |     "lint:js": "eslint src",
18 |     "lint:css": "stylelint './src/**/*.js'",
19 |     "compile": "rm -rf lib/ && babel -d lib/ src/"
20 |   },
21 |   "devDependencies": {
22 |     "babel-cli": "^6.26.0",
23 |     "babel-loader": "^7.1.2",
24 |     "babel-plugin-transform-react-jsx": "^6.24.1",
25 |     "babel-preset-env": "^1.6.0",
26 |     "babel-preset-stage-1": "^6.24.1",
27 |     "eslint": "^4.4.1",
28 |     "eslint-config-flying-rocket": "^1.1.1",
29 |     "npm-run-all": "^4.1.1",
30 |     "react-styleguidist": "^6.0.28",
31 |     "stylelint": "^8.2.0",
32 |     "stylelint-config-standard": "^17.0.0",
33 |     "stylelint-config-styled-components": "^0.1.1",
34 |     "stylelint-processor-styled-components": "^1.0.0",
35 |     "webpack": "^3.6.0"
36 |   },
37 |   "dependencies": {
38 |     "preact": "^8.2.1",
39 |     "preact-compat": "^3.17.0",
40 |     "prop-types": "^15.5.10",
41 |     "styled-components": "^2.1.2"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/Bar/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { bar } from '../../utils/animations'
 5 | import { getColor } from '../../utils//defaults'
 6 | 
 7 | const Bar = ({ bgBar = '#efefef', color, duration = '0.5s' }) => {
 8 |     const PingPong = styled.div`
 9 |         position: relative;
10 |         margin: 100px auto;
11 |         width: 200px;
12 |         height: 20px;
13 |         background-color: ${bgBar};
14 | 
15 |         &::after {
16 |             content: '';
17 |             width: 50px;
18 |             height: 20px;
19 |             position: absolute;
20 |             top: calc(50% - 10px);
21 |             left: calc(50% - 100px);
22 |             background-color: ${getColor(color)};
23 |             animation: ${bar} ${duration} linear infinite alternate;
24 |         }
25 |     `
26 |     return <PingPong bgBar={bgBar} color={color} duration={duration} />
27 | }
28 | export default Bar
29 | 
30 | Bar.propTypes = {
31 |     /**
32 |      * Background or the bar
33 |      * default is #CCC
34 |      */
35 |     bgBar: PropTypes.string,
36 | 
37 |     /**
38 |      * Background of the tab bar
39 |      * default is #333
40 |      */
41 |     color: PropTypes.string,
42 | 
43 |     /**
44 |      * transition duration
45 |      * default is 0.5s
46 |      */
47 |     duration: PropTypes.string
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/Pulsate/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { pulsate } from '../../utils/animations'
 5 | import { getSize, getColor } from '../../utils//defaults'
 6 | 
 7 | const Pulsate = ({ color, duration, size }) => {
 8 |     const Spinner = styled.div`
 9 | 		position: relative;
10 | 		margin: 100px auto;
11 | 		width: ${getSize(size)};
12 | 		height: ${getSize(size)};
13 | 	`
14 | 
15 |     const DefaultBounce = styled.div`
16 | 		width: 100%;
17 | 		height: 100%;
18 | 		border-radius: 50%;
19 | 		background-color: ${getColor(color)};
20 | 		opacity: 0.6;
21 | 		position: absolute;
22 | 		top: 0;
23 | 		left: 0;
24 | 		animation: ${pulsate} 2s infinite ease-in-out;
25 | 		animation-duration: ${props => (props.duration ? props.duration : '2.0s')};
26 | 	`
27 | 
28 |     const Bounce2 = DefaultBounce.extend` animation-delay: -1s; `
29 | 
30 |     return (
31 |         <Spinner size={size}>
32 |             <DefaultBounce color={color} duration={duration} />
33 |             <Bounce2 color={color} duration={duration} />
34 |         </Spinner>
35 |     )
36 | }
37 | 
38 | export default Pulsate
39 | 
40 | Pulsate.propTypes = {
41 | 
42 |     /**
43 | 	 * Background of the spinner
44 | 	 * default is #333
45 | 	 */
46 |     color: PropTypes.string,
47 | 
48 |     /**
49 | 	 * Animation duration
50 | 	 * default is 1.2s
51 | 	 */
52 |     duration: PropTypes.string,
53 | 
54 |     /**
55 | 	 * Size of the spinner
56 | 	 * default is 40px
57 | 	 */
58 |     size: PropTypes.string
59 | }
60 | 


--------------------------------------------------------------------------------
/src/components/Cube/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { cube } from '../../utils/animations'
 5 | import { getSize, getColor } from '../../utils//defaults'
 6 | 
 7 | const Cube = ({ color, duration, size, cubeSize }) => {
 8 |     const Spinner = styled.div`
 9 | 		margin: 100px auto;
10 | 		position: relative;
11 | 		width: ${getSize(size)};
12 | 		height: ${getSize(size)};
13 | 	`
14 | 
15 |     const DefaultCube = styled.div`
16 | 		width: ${props => (props.cubeSize ? props.cubeSize : '15px')};
17 | 		height: ${props => (props.cubeSize ? props.cubeSize : '15px')};
18 | 		position: absolute;
19 | 		top: 0;
20 | 		left: 0;
21 | 		background-color: ${getColor(color)};
22 | 		animation: ${cube} 2s infinite ease-in-out;
23 | 		animation-duration: ${props => (props.duration ? props.duration : '1.8s')};
24 | 	`
25 | 
26 |     const StyledCube = DefaultCube.extend` animation-delay: -0.9s; `
27 | 
28 |     return (
29 |         <Spinner size={size}>
30 |             <DefaultCube color={color} cubeSize={cubeSize} duration={duration} />
31 |             <StyledCube color={color} cubeSize={cubeSize} duration={duration} />
32 |         </Spinner>
33 |     )
34 | }
35 | 
36 | export default Cube
37 | 
38 | Cube.propTypes = {
39 | 
40 |     /**
41 | 	 * Background of the spinner
42 | 	 * default is #333
43 | 	 */
44 |     color: PropTypes.string,
45 | 
46 |     /**
47 | 	 * Animation duration
48 | 	 * default is 1.2s
49 | 	 */
50 |     duration: PropTypes.string,
51 | 
52 |     /**
53 | 	 * Size of the spinner
54 | 	 * default is 40px
55 | 	 */
56 |     size: PropTypes.string,
57 | 
58 |     /**
59 | 	 * Size of the each cube
60 | 	 * default is 15
61 | 	 */
62 |     cubeSize: PropTypes.string
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/RotateScale/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { rotate, bounce } from '../../utils/animations'
 5 | import { getSize, getColor } from '../../utils/defaults'
 6 | 
 7 | const RotateScale = ({ color, duration, size }) => {
 8 |     const Spinner = styled.div`
 9 | 		margin: 100px auto;
10 | 		position: relative;
11 | 		width: ${getSize(size)};
12 | 		height: ${getSize(size)};
13 | 		text-align: center;
14 | 		animation: ${rotate} 2s infinite ease-in-out;
15 | 		animation-duration: ${props => (props.duration ? props.duration : '2s')};
16 | 	`
17 | 
18 |     const DefaultCube = styled.div`
19 | 		width: 60%;
20 | 		height: 60%;
21 | 		display: inline-block;
22 | 		position: absolute;
23 | 		top: 0;
24 | 		border-radius: 100%;
25 | 		background-color: ${getColor(color)};
26 | 		animation: ${bounce} 2s infinite ease-in-out;
27 | 		animation-duration: ${props => (props.duration ? props.duration : '2s')};
28 | 	`
29 | 
30 |     const Cube = DefaultCube.extend`
31 | 		top: auto;
32 | 		bottom: 0;
33 | 		animation-delay: -1s;
34 | 	`
35 | 
36 |     return (
37 |         <Spinner size={size} duration={duration}>
38 |             <DefaultCube color={color} duration={duration} />
39 |             <Cube color={color} duration={duration} />
40 |         </Spinner>
41 |     )
42 | }
43 | 
44 | export default RotateScale
45 | 
46 | RotateScale.propTypes = {
47 | 
48 |     /**
49 | 	 * Background of the spinner
50 | 	 * default is #333
51 | 	 */
52 |     color: PropTypes.string,
53 | 
54 |     /**
55 | 	 * Animation duration
56 | 	 * default is 1.2s
57 | 	 */
58 |     duration: PropTypes.string,
59 | 
60 |     /**
61 | 	 * Size of the spinner
62 | 	 * default is 40px
63 | 	 */
64 |     size: PropTypes.string,
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/DotScale/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { dots } from '../../utils/animations'
 5 | import { getSize, getColor } from '../../utils/defaults'
 6 | 
 7 | const DotScale = ({ color, duration, size, dotSize }) => {
 8 |     const Spinner = styled.div`
 9 | 		margin: 100px auto 0;
10 | 		position: relative;
11 | 		width: ${getSize(size)};
12 | 		height: ${getSize(size)};
13 | 		text-align: center;
14 | 	`
15 | 
16 |     const DefaultDot = styled.div`
17 | 		width: ${props => (props.dotSize ? props.dotSize : '18px')};
18 | 		height: ${props => (props.dotSize ? props.dotSize : '18px')};
19 | 		border-radius: 100%;
20 | 		display: inline-block;
21 | 		background-color: ${getColor(color)};
22 | 		animation: ${dots} 1.4s infinite ease-in-out both;
23 | 		animation-duration: ${props => (props.duration ? props.duration : '1.4s')};
24 | 	`
25 | 
26 |     const Dot1 = DefaultDot.extend` animation-delay: -0.32s; `
27 | 
28 |     const Dot2 = DefaultDot.extend` animation-delay: -0.16s; `
29 | 
30 |     return (
31 |         <Spinner size={size}>
32 |             <Dot1 color={color} duration={duration} dotSize={dotSize} />
33 |             <Dot2 color={color} duration={duration} dotSize={dotSize} />
34 |         </Spinner>
35 |     )
36 | }
37 | 
38 | export default DotScale
39 | 
40 | DotScale.propTypes = {
41 | 
42 |     /**
43 | 	 * Background of the spinner
44 | 	 * default is #333
45 | 	 */
46 |     color: PropTypes.string,
47 | 
48 |     /**
49 | 	 * Animation duration
50 | 	 * default is 1.2s
51 | 	 */
52 |     duration: PropTypes.string,
53 | 
54 |     /**
55 | 	 * Size of the spinner
56 | 	 * default is 40px
57 | 	 */
58 |     size: PropTypes.string,
59 | 
60 |     /**
61 | 	 * Size of the dots
62 | 	 * default is 18px
63 | 	 */
64 |     dotSize: PropTypes.string
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/CubeGrid/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { grid } from '../../utils/animations'
 5 | import { getSize, getColor } from '../../utils//defaults'
 6 | 
 7 | const CubeGrid = ({ color, size }) => {
 8 |     const Spinner = styled.div`
 9 | 		position: relative;
10 | 		margin: 100px auto;
11 | 		width: ${getSize(size)};
12 | 		height: ${getSize(size)};
13 | 	`
14 | 
15 |     const Cube = styled.div`
16 | 		width: 33%;
17 | 		height: 33%;
18 | 		background-color: ${getColor(color)};
19 | 		float: left;
20 | 		animation: ${grid} 1.3s infinite ease-in-out;
21 | 	`
22 | 
23 |     const Cube1 = Cube.extend`
24 | 		animation-delay: 0.2s;
25 | 	`
26 |     const Cube2 = Cube.extend`
27 | 		animation-delay: 0.3s;
28 | 	`
29 |     const Cube3 = Cube.extend`
30 | 		animation-delay: 0.4s;
31 | 	`
32 |     const Cube4 = Cube.extend`
33 | 		animation-delay: 0.1s;
34 | 	`
35 |     const Cube5 = Cube.extend`
36 | 		animation-delay: 0.2s;
37 | 	`
38 |     const Cube6 = Cube.extend`
39 | 		animation-delay: 0.3s;
40 | 	`
41 |     const Cube7 = Cube.extend`
42 | 		animation-delay: 0s;
43 | 	`
44 |     const Cube8 = Cube.extend`
45 | 		animation-delay: 0.1s;
46 | 	`
47 |     const Cube9 = Cube.extend`
48 | 		animation-delay: 0.2s;
49 | 	`
50 | 
51 |     return (
52 |         <Spinner size={size}>
53 |             <Cube1 color={color} />
54 |             <Cube2 color={color} />
55 |             <Cube3 color={color} />
56 |             <Cube4 color={color} />
57 |             <Cube5 color={color} />
58 |             <Cube6 color={color} />
59 |             <Cube7 color={color} />
60 |             <Cube8 color={color} />
61 |             <Cube9 color={color} />
62 |         </Spinner>
63 |     )
64 | }
65 | 
66 | export default CubeGrid
67 | 
68 | CubeGrid.propTypes = {
69 | 
70 |     /**
71 | 	 * Background of the spinner
72 | 	 * default is #333
73 | 	 */
74 |     color: PropTypes.string,
75 | 
76 |     /**
77 | 	 * Size of the spinner
78 | 	 * default is 40px
79 | 	 */
80 |     size: PropTypes.string
81 | }
82 | 


--------------------------------------------------------------------------------
/src/components/Stretch/index.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | import PropTypes from 'prop-types'
 3 | import styled from 'styled-components'
 4 | import { stretch } from '../../utils/animations'
 5 | import { getSize, getColor } from '../../utils//defaults'
 6 | 
 7 | const Stretch = ({ color, duration, size }) => {
 8 |     const durationTime = durationT => (durationT ? parseInt(durationT, 10) : 1.2)
 9 |     const Spinner = styled.div`
10 | 		margin: 100px auto;
11 | 		width: ${props => (props.size ? props.size : '50px')};
12 | 		text-align: center;
13 | 		font-size: 10px;
14 | 		height: ${getSize(size)};
15 | 	`
16 | 
17 |     const DefaultRect = styled.div`
18 | 		background-color: ${getColor(color)};
19 | 		height: 100%;
20 | 		width: ${props => (props.rectWidth ? props.rectWidth : '6px')};
21 | 		display: inline-block;
22 | 		animation: ${stretch} 1.2s infinite ease-in-out;
23 | 		animation-duration: ${durationTime(duration)}s;
24 | 	`
25 | 
26 |     const Rect2 = DefaultRect.extend`
27 | 		animation-delay: -${durationTime(duration) - 0.1}s;
28 | 	`
29 |     const Rect3 = DefaultRect.extend`
30 | 		animation-delay: -${durationTime(duration) - 0.2}s;
31 | 	`
32 |     const Rect4 = DefaultRect.extend`
33 | 		animation-delay: -${durationTime(duration) - 0.3}s;
34 | 	`
35 |     const Rect5 = DefaultRect.extend`
36 | 		animation-delay: -${durationTime(duration) - 0.4}s;
37 | 	`
38 | 
39 |     return (
40 |         <Spinner size={size}>
41 |             <DefaultRect />
42 |             <Rect2 />
43 |             <Rect3 />
44 |             <Rect4 />
45 |             <Rect5 />
46 |         </Spinner>
47 |     )
48 | }
49 | 
50 | export default Stretch
51 | 
52 | Stretch.propTypes = {
53 | 
54 |     /**
55 | 	 * Background of the spinner
56 | 	 * default is #333
57 | 	 */
58 |     color: PropTypes.string,
59 | 
60 |     /**
61 | 	 * Width of each rectangle
62 | 	 * default is 6px
63 | 	 */
64 |     rectWidth: PropTypes.string,
65 | 
66 |     /**
67 | 	 * Animation duration
68 | 	 * default is 1.2s
69 | 	 */
70 |     duration: PropTypes.string,
71 | 
72 |     /**
73 | 	 * Size of the spinner
74 | 	 * default is 40px
75 | 	 */
76 |     size: PropTypes.string
77 | }
78 | 


--------------------------------------------------------------------------------
/lib/components/Block/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n        margin: 100px auto;\n        animation: ', ' 1.2s infinite ease-in-out;\n        background: ', ';\n        width: ', ';\n        height: ', ';\n        animation-duration: ', ';\n    '], ['\n        margin: 100px auto;\n        animation: ', ' 1.2s infinite ease-in-out;\n        background: ', ';\n        width: ', ';\n        height: ', ';\n        animation-duration: ', ';\n    ']);
 8 | 
 9 | var _preact = require('preact');
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _styledComponents = require('styled-components');
16 | 
17 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
18 | 
19 | var _animations = require('../../utils/animations');
20 | 
21 | var _defaults = require('../../utils/defaults');
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
26 | 
27 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
28 | 
29 | var Block = function Block(_ref) {
30 |     var props = _objectWithoutProperties(_ref, []);
31 | 
32 |     /* eslint-disable */
33 |     var Spinner = _styledComponents2.default.div(_templateObject, _animations.rotateplane, (0, _defaults.getColor)(props.color), (0, _defaults.getSize)(props.size), (0, _defaults.getSize)(props.size), function (props) {
34 |         return props.duration ? props.duration : '1.2s';
35 |     });
36 |     /* eslint-enable */
37 | 
38 |     return (0, _preact.h)(Spinner, props);
39 | };
40 | 
41 | exports.default = Block;
42 | 
43 | 
44 | Block.propTypes = {
45 |     /**
46 |     * Background of the spinner
47 |     * default is #333
48 |     */
49 |     color: _propTypes2.default.string,
50 | 
51 |     /**
52 |     * Animation duration
53 |     * default is 1.2s
54 |     */
55 |     duration: _propTypes2.default.string,
56 | 
57 |     /**
58 |     * Size of the spinner
59 |     * default is 40px
60 |     */
61 |     size: _propTypes2.default.string
62 | };


--------------------------------------------------------------------------------
/lib/components/Scale/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n        margin: 100px auto;\n        animation: ', ' 1.2s infinite ease-in-out;\n        background: ', ';\n        width: ', ';\n        height: ', ';\n        border-radius: 100%;\n        animation-duration: ', ';\n    '], ['\n        margin: 100px auto;\n        animation: ', ' 1.2s infinite ease-in-out;\n        background: ', ';\n        width: ', ';\n        height: ', ';\n        border-radius: 100%;\n        animation-duration: ', ';\n    ']);
 8 | 
 9 | var _preact = require('preact');
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _styledComponents = require('styled-components');
16 | 
17 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
18 | 
19 | var _animations = require('../../utils/animations');
20 | 
21 | var _defaults = require('../../utils/defaults');
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
26 | 
27 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
28 | 
29 | var Scale = function Scale(_ref) {
30 |     var props = _objectWithoutProperties(_ref, []);
31 | 
32 |     /* eslint-disable */
33 |     var Spinner = _styledComponents2.default.div(_templateObject, _animations.scale, (0, _defaults.getColor)(props.color), (0, _defaults.getSize)(props.size), (0, _defaults.getSize)(props.size), function (props) {
34 |         return props.duration ? props.duration : '1.0s';
35 |     });
36 |     /* eslint-enable */
37 | 
38 |     return (0, _preact.h)(Spinner, props);
39 | };
40 | 
41 | exports.default = Scale;
42 | 
43 | 
44 | Scale.propTypes = {
45 |     /**
46 |     * Background of the spinner
47 |     * default is #333
48 |     */
49 |     color: _propTypes2.default.string,
50 | 
51 |     /**
52 |     * Animation duration
53 |     * default is 1.2s
54 |     */
55 |     duration: _propTypes2.default.string,
56 | 
57 |     /**
58 |     * Size of the spinner
59 |     * default is 40px
60 |     */
61 |     size: _propTypes2.default.string
62 | };


--------------------------------------------------------------------------------
/src/utils/animations.js:
--------------------------------------------------------------------------------
  1 | import { keyframes } from 'styled-components'
  2 | 
  3 | export const rotateplane = keyframes`
  4 |   0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  5 | 
  6 | 	50% {
  7 | 		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  8 |   }
  9 | 
 10 | 	100% {
 11 | 		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 12 | 	}
 13 | `
 14 | 
 15 | export const pulsate = keyframes`
 16 |   0%,
 17 |   100% {
 18 |     transform: scale(0);
 19 |   }
 20 | 
 21 |   50% {
 22 |     transform: scale(1);
 23 |   }
 24 | `
 25 | 
 26 | export const stretch = keyframes`
 27 |   0%,
 28 |   40%,
 29 |   100% {
 30 |     transform: scaleY(0.4);
 31 |   }
 32 | 
 33 |   20% {
 34 |     transform: scaleY(1);
 35 | 	}
 36 | `
 37 | 
 38 | export const cube = keyframes`
 39 |   25% {
 40 |     transform: translateX(42px) rotate(-90deg) scale(0.5);
 41 |   }
 42 | 
 43 |   50% {
 44 |     transform: translateX(42px) translateY(42px) rotate(-179deg);
 45 |   }
 46 | 
 47 |   50.1% {
 48 |     transform: translateX(42px) translateY(42px) rotate(-180deg);
 49 |   }
 50 | 
 51 |   75% {
 52 |     transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);
 53 |   }
 54 | 
 55 |   100% {
 56 |     transform: rotate(-360deg);
 57 |   }
 58 | `
 59 | 
 60 | export const scale = keyframes`
 61 |   0% {
 62 |     transform: scale(0);
 63 |   }
 64 | 
 65 |   100% {
 66 |     transform: scale(1);
 67 |     opacity: 0;
 68 |   }
 69 | `
 70 | 
 71 | export const rotate = keyframes`
 72 |    100% { transform: rotate(360deg); }
 73 | `
 74 | 
 75 | export const bounce = keyframes`
 76 |   0%,
 77 |   100% {
 78 |     transform: scale(0);
 79 |   }
 80 | 
 81 |   50% {
 82 |     transform: scale(1);
 83 |   }
 84 | `
 85 | 
 86 | export const dots = keyframes`
 87 |   0%,
 88 |   80%,
 89 |   100% {
 90 |     transform: scale(0);
 91 |   }
 92 | 
 93 |   40% {
 94 |     transform: scale(1);
 95 |   }
 96 | `
 97 | 
 98 | export const circular = keyframes`
 99 |   0%,
100 |   80%,
101 |   100% {
102 |     transform: scale(0);
103 |   }
104 | 
105 |   40% {
106 |     transform: scale(1);
107 |   }
108 | `
109 | 
110 | export const grid = keyframes`
111 |   0%,
112 |   70%,
113 |   100% {
114 |     transform: scale3D(1, 1, 1);
115 |   }
116 | 
117 |   35% {
118 |     transform: scale3D(0, 0, 1);
119 |   }
120 | `
121 | 
122 | export const bar = keyframes`
123 | 	0% {
124 | 		left: calc(50% - 100px);
125 | 	}
126 | 
127 | 	100% {
128 | 		left: calc(50% - -50px);
129 | 	}
130 | `
131 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _Block = require('./components/Block');
 8 | 
 9 | Object.defineProperty(exports, 'Block', {
10 |   enumerable: true,
11 |   get: function get() {
12 |     return _interopRequireDefault(_Block).default;
13 |   }
14 | });
15 | 
16 | var _Circular = require('./components/Circular');
17 | 
18 | Object.defineProperty(exports, 'Circular', {
19 |   enumerable: true,
20 |   get: function get() {
21 |     return _interopRequireDefault(_Circular).default;
22 |   }
23 | });
24 | 
25 | var _Cube = require('./components/Cube');
26 | 
27 | Object.defineProperty(exports, 'Cube', {
28 |   enumerable: true,
29 |   get: function get() {
30 |     return _interopRequireDefault(_Cube).default;
31 |   }
32 | });
33 | 
34 | var _CubeGrid = require('./components/CubeGrid');
35 | 
36 | Object.defineProperty(exports, 'CubeGrid', {
37 |   enumerable: true,
38 |   get: function get() {
39 |     return _interopRequireDefault(_CubeGrid).default;
40 |   }
41 | });
42 | 
43 | var _DotScale = require('./components/DotScale');
44 | 
45 | Object.defineProperty(exports, 'DotScale', {
46 |   enumerable: true,
47 |   get: function get() {
48 |     return _interopRequireDefault(_DotScale).default;
49 |   }
50 | });
51 | 
52 | var _Pulsate = require('./components/Pulsate');
53 | 
54 | Object.defineProperty(exports, 'Pulsate', {
55 |   enumerable: true,
56 |   get: function get() {
57 |     return _interopRequireDefault(_Pulsate).default;
58 |   }
59 | });
60 | 
61 | var _RotateScale = require('./components/RotateScale');
62 | 
63 | Object.defineProperty(exports, 'RotateScale', {
64 |   enumerable: true,
65 |   get: function get() {
66 |     return _interopRequireDefault(_RotateScale).default;
67 |   }
68 | });
69 | 
70 | var _Scale = require('./components/Scale');
71 | 
72 | Object.defineProperty(exports, 'Scale', {
73 |   enumerable: true,
74 |   get: function get() {
75 |     return _interopRequireDefault(_Scale).default;
76 |   }
77 | });
78 | 
79 | var _Stretch = require('./components/Stretch');
80 | 
81 | Object.defineProperty(exports, 'Stretch', {
82 |   enumerable: true,
83 |   get: function get() {
84 |     return _interopRequireDefault(_Stretch).default;
85 |   }
86 | });
87 | 
88 | var _Bar = require('./components/Bar');
89 | 
90 | Object.defineProperty(exports, 'Bar', {
91 |   enumerable: true,
92 |   get: function get() {
93 |     return _interopRequireDefault(_Bar).default;
94 |   }
95 | });
96 | 
97 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }


--------------------------------------------------------------------------------
/lib/components/Bar/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n        position: relative;\n        margin: 100px auto;\n        width: 200px;\n        height: 20px;\n        background-color: ', ';\n\n        &::after {\n            content: \'\';\n            width: 50px;\n            height: 20px;\n            position: absolute;\n            top: calc(50% - 10px);\n            left: calc(50% - 100px);\n            background-color: ', ';\n            animation: ', ' ', ' linear infinite alternate;\n        }\n    '], ['\n        position: relative;\n        margin: 100px auto;\n        width: 200px;\n        height: 20px;\n        background-color: ', ';\n\n        &::after {\n            content: \'\';\n            width: 50px;\n            height: 20px;\n            position: absolute;\n            top: calc(50% - 10px);\n            left: calc(50% - 100px);\n            background-color: ', ';\n            animation: ', ' ', ' linear infinite alternate;\n        }\n    ']);
 8 | 
 9 | var _preact = require('preact');
10 | 
11 | var _propTypes = require('prop-types');
12 | 
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 | 
15 | var _styledComponents = require('styled-components');
16 | 
17 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
18 | 
19 | var _animations = require('../../utils/animations');
20 | 
21 | var _defaults = require('../../utils//defaults');
22 | 
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 | 
25 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
26 | 
27 | var Bar = function Bar(_ref) {
28 |     var _ref$bgBar = _ref.bgBar,
29 |         bgBar = _ref$bgBar === undefined ? '#efefef' : _ref$bgBar,
30 |         color = _ref.color,
31 |         _ref$duration = _ref.duration,
32 |         duration = _ref$duration === undefined ? '0.5s' : _ref$duration;
33 | 
34 |     var PingPong = _styledComponents2.default.div(_templateObject, bgBar, (0, _defaults.getColor)(color), _animations.bar, duration);
35 |     return (0, _preact.h)(PingPong, { bgBar: bgBar, color: color, duration: duration });
36 | };
37 | exports.default = Bar;
38 | 
39 | 
40 | Bar.propTypes = {
41 |     /**
42 |      * Background or the bar
43 |      * default is #CCC
44 |      */
45 |     bgBar: _propTypes2.default.string,
46 | 
47 |     /**
48 |      * Background of the tab bar
49 |      * default is #333
50 |      */
51 |     color: _propTypes2.default.string,
52 | 
53 |     /**
54 |      * transition duration
55 |      * default is 0.5s
56 |      */
57 |     duration: _propTypes2.default.string
58 | };


--------------------------------------------------------------------------------
/lib/components/Pulsate/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 | 			value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n\t\tposition: relative;\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t'], ['\n\t\tposition: relative;\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t']),
 8 |     _templateObject2 = _taggedTemplateLiteral(['\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ', ';\n\t\topacity: 0.6;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t'], ['\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ', ';\n\t\topacity: 0.6;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t']),
 9 |     _templateObject3 = _taggedTemplateLiteral([' animation-delay: -1s; '], [' animation-delay: -1s; ']);
10 | 
11 | var _preact = require('preact');
12 | 
13 | var _propTypes = require('prop-types');
14 | 
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
16 | 
17 | var _styledComponents = require('styled-components');
18 | 
19 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
20 | 
21 | var _animations = require('../../utils/animations');
22 | 
23 | var _defaults = require('../../utils//defaults');
24 | 
25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26 | 
27 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
28 | 
29 | var Pulsate = function Pulsate(_ref) {
30 | 			var color = _ref.color,
31 | 			    duration = _ref.duration,
32 | 			    size = _ref.size;
33 | 
34 | 			var Spinner = _styledComponents2.default.div(_templateObject, (0, _defaults.getSize)(size), (0, _defaults.getSize)(size));
35 | 
36 | 			var DefaultBounce = _styledComponents2.default.div(_templateObject2, (0, _defaults.getColor)(color), _animations.pulsate, function (props) {
37 | 						return props.duration ? props.duration : '2.0s';
38 | 			});
39 | 
40 | 			var Bounce2 = DefaultBounce.extend(_templateObject3);
41 | 
42 | 			return (0, _preact.h)(
43 | 						Spinner,
44 | 						{ size: size },
45 | 						(0, _preact.h)(DefaultBounce, { color: color, duration: duration }),
46 | 						(0, _preact.h)(Bounce2, { color: color, duration: duration })
47 | 			);
48 | };
49 | 
50 | exports.default = Pulsate;
51 | 
52 | 
53 | Pulsate.propTypes = {
54 | 
55 | 			/**
56 |    * Background of the spinner
57 |    * default is #333
58 |    */
59 | 			color: _propTypes2.default.string,
60 | 
61 | 			/**
62 |    * Animation duration
63 |    * default is 1.2s
64 |    */
65 | 			duration: _propTypes2.default.string,
66 | 
67 | 			/**
68 |    * Size of the spinner
69 |    * default is 40px
70 |    */
71 | 			size: _propTypes2.default.string
72 | };


--------------------------------------------------------------------------------
/lib/components/Cube/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 | 			value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n\t\tmargin: 100px auto;\n\t\tposition: relative;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t'], ['\n\t\tmargin: 100px auto;\n\t\tposition: relative;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t']),
 8 |     _templateObject2 = _taggedTemplateLiteral(['\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: ', ';\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t'], ['\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tbackground-color: ', ';\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t']),
 9 |     _templateObject3 = _taggedTemplateLiteral([' animation-delay: -0.9s; '], [' animation-delay: -0.9s; ']);
10 | 
11 | var _preact = require('preact');
12 | 
13 | var _propTypes = require('prop-types');
14 | 
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
16 | 
17 | var _styledComponents = require('styled-components');
18 | 
19 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
20 | 
21 | var _animations = require('../../utils/animations');
22 | 
23 | var _defaults = require('../../utils//defaults');
24 | 
25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26 | 
27 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
28 | 
29 | var Cube = function Cube(_ref) {
30 | 			var color = _ref.color,
31 | 			    duration = _ref.duration,
32 | 			    size = _ref.size,
33 | 			    cubeSize = _ref.cubeSize;
34 | 
35 | 			var Spinner = _styledComponents2.default.div(_templateObject, (0, _defaults.getSize)(size), (0, _defaults.getSize)(size));
36 | 
37 | 			var DefaultCube = _styledComponents2.default.div(_templateObject2, function (props) {
38 | 						return props.cubeSize ? props.cubeSize : '15px';
39 | 			}, function (props) {
40 | 						return props.cubeSize ? props.cubeSize : '15px';
41 | 			}, (0, _defaults.getColor)(color), _animations.cube, function (props) {
42 | 						return props.duration ? props.duration : '1.8s';
43 | 			});
44 | 
45 | 			var StyledCube = DefaultCube.extend(_templateObject3);
46 | 
47 | 			return (0, _preact.h)(
48 | 						Spinner,
49 | 						{ size: size },
50 | 						(0, _preact.h)(DefaultCube, { color: color, cubeSize: cubeSize, duration: duration }),
51 | 						(0, _preact.h)(StyledCube, { color: color, cubeSize: cubeSize, duration: duration })
52 | 			);
53 | };
54 | 
55 | exports.default = Cube;
56 | 
57 | 
58 | Cube.propTypes = {
59 | 
60 | 			/**
61 |    * Background of the spinner
62 |    * default is #333
63 |    */
64 | 			color: _propTypes2.default.string,
65 | 
66 | 			/**
67 |    * Animation duration
68 |    * default is 1.2s
69 |    */
70 | 			duration: _propTypes2.default.string,
71 | 
72 | 			/**
73 |    * Size of the spinner
74 |    * default is 40px
75 |    */
76 | 			size: _propTypes2.default.string,
77 | 
78 | 			/**
79 |    * Size of the each cube
80 |    * default is 15
81 |    */
82 | 			cubeSize: _propTypes2.default.string
83 | };


--------------------------------------------------------------------------------
/lib/components/RotateScale/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 | 			value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n\t\tmargin: 100px auto;\n\t\tposition: relative;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\ttext-align: center;\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t'], ['\n\t\tmargin: 100px auto;\n\t\tposition: relative;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\ttext-align: center;\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t']),
 8 |     _templateObject2 = _taggedTemplateLiteral(['\n\t\twidth: 60%;\n\t\theight: 60%;\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tborder-radius: 100%;\n\t\tbackground-color: ', ';\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t'], ['\n\t\twidth: 60%;\n\t\theight: 60%;\n\t\tdisplay: inline-block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tborder-radius: 100%;\n\t\tbackground-color: ', ';\n\t\tanimation: ', ' 2s infinite ease-in-out;\n\t\tanimation-duration: ', ';\n\t']),
 9 |     _templateObject3 = _taggedTemplateLiteral(['\n\t\ttop: auto;\n\t\tbottom: 0;\n\t\tanimation-delay: -1s;\n\t'], ['\n\t\ttop: auto;\n\t\tbottom: 0;\n\t\tanimation-delay: -1s;\n\t']);
10 | 
11 | var _preact = require('preact');
12 | 
13 | var _propTypes = require('prop-types');
14 | 
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
16 | 
17 | var _styledComponents = require('styled-components');
18 | 
19 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
20 | 
21 | var _animations = require('../../utils/animations');
22 | 
23 | var _defaults = require('../../utils/defaults');
24 | 
25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26 | 
27 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
28 | 
29 | var RotateScale = function RotateScale(_ref) {
30 | 			var color = _ref.color,
31 | 			    duration = _ref.duration,
32 | 			    size = _ref.size;
33 | 
34 | 			var Spinner = _styledComponents2.default.div(_templateObject, (0, _defaults.getSize)(size), (0, _defaults.getSize)(size), _animations.rotate, function (props) {
35 | 						return props.duration ? props.duration : '2s';
36 | 			});
37 | 
38 | 			var DefaultCube = _styledComponents2.default.div(_templateObject2, (0, _defaults.getColor)(color), _animations.bounce, function (props) {
39 | 						return props.duration ? props.duration : '2s';
40 | 			});
41 | 
42 | 			var Cube = DefaultCube.extend(_templateObject3);
43 | 
44 | 			return (0, _preact.h)(
45 | 						Spinner,
46 | 						{ size: size, duration: duration },
47 | 						(0, _preact.h)(DefaultCube, { color: color, duration: duration }),
48 | 						(0, _preact.h)(Cube, { color: color, duration: duration })
49 | 			);
50 | };
51 | 
52 | exports.default = RotateScale;
53 | 
54 | 
55 | RotateScale.propTypes = {
56 | 
57 | 			/**
58 |    * Background of the spinner
59 |    * default is #333
60 |    */
61 | 			color: _propTypes2.default.string,
62 | 
63 | 			/**
64 |    * Animation duration
65 |    * default is 1.2s
66 |    */
67 | 			duration: _propTypes2.default.string,
68 | 
69 | 			/**
70 |    * Size of the spinner
71 |    * default is 40px
72 |    */
73 | 			size: _propTypes2.default.string
74 | };


--------------------------------------------------------------------------------
/src/components/Circular/index.js:
--------------------------------------------------------------------------------
  1 | import { h } from 'preact'
  2 | import PropTypes from 'prop-types'
  3 | import styled from 'styled-components'
  4 | import { circular } from '../../utils/animations'
  5 | import { getSize, getColor } from '../../utils//defaults'
  6 | 
  7 | const Circular = ({ color, size }) => {
  8 |     const Spinner = styled.div`
  9 | 		position: relative;
 10 | 		margin: 100px auto;
 11 | 		width: ${getSize(size)};
 12 | 		height: ${getSize(size)};
 13 | 		` 
 14 |     const Circle = styled.div`
 15 | 		width: 100%;
 16 | 		height: 100%;
 17 | 		position: absolute;
 18 | 		left: 0;
 19 | 		top: 0;
 20 | 
 21 | 		&::before {
 22 | 			content: '';
 23 | 			display: block;
 24 | 			margin: 0 auto;
 25 | 			width: 15%;
 26 | 			height: 15%;
 27 | 			background-color: ${getColor(color)};
 28 | 			border-radius: 100%;
 29 | 			animation: ${circular} 1.2s infinite ease-in-out both;
 30 | 		}
 31 | 	`
 32 | 
 33 |     const Circle2 = Circle.extend`
 34 |         transform: rotate(30deg);
 35 |         &::before { animation-delay: -1.1s; }
 36 |     `
 37 |     const Circle3 = Circle.extend`
 38 |         transform: rotate(60deg);
 39 |         &::before { animation-delay: -1s; }
 40 |     `
 41 |     const Circle4 = Circle.extend`
 42 |         transform: rotate(90deg);
 43 |         &::before { animation-delay: -0.9s; }
 44 |     `
 45 |     const Circle5 = Circle.extend`
 46 |         transform: rotate(120deg);
 47 |         &::before { animation-delay: -0.8s; }
 48 |     `
 49 |     const Circle6 = Circle.extend`
 50 |         transform: rotate(150deg);
 51 |         &::before { animation-delay: -0.7s; }
 52 |     `
 53 |     const Circle7 = Circle.extend`
 54 |         transform: rotate(180deg);
 55 |         &::before { animation-delay: -0.6s; }
 56 |     `
 57 |     const Circle8 = Circle.extend`
 58 |         transform: rotate(210deg);
 59 |         &::before { animation-delay: -0.5s; }
 60 |     `
 61 |     const Circle9 = Circle.extend`
 62 |         transform: rotate(240deg);
 63 |         &::before { animation-delay: -0.4s; }
 64 |     `
 65 |     const Circle10 = Circle.extend`
 66 |         transform: rotate(270deg);
 67 |         &::before { animation-delay: -0.3s; }
 68 |     `
 69 |     const Circle11 = Circle.extend`
 70 |         transform: rotate(300deg);
 71 |         &::before { animation-delay: -0.2s; }
 72 |     `
 73 |     const Circle12 = Circle.extend`
 74 |         transform: rotate(330deg);
 75 |         &::before { animation-delay: -0.1s; }
 76 |     `
 77 | 
 78 |     return (
 79 |         <Spinner size={size}>
 80 |             <Circle color={color} />
 81 |             <Circle2 color={color} />
 82 |             <Circle3 color={color} />
 83 |             <Circle4 color={color} />
 84 |             <Circle5 color={color} />
 85 |             <Circle6 color={color} />
 86 |             <Circle7 color={color} />
 87 |             <Circle8 color={color} />
 88 |             <Circle9 color={color} />
 89 |             <Circle10 color={color} />
 90 |             <Circle11 color={color} />
 91 |             <Circle12 color={color} />
 92 |         </Spinner>
 93 |     )
 94 | }
 95 | 
 96 | export default Circular
 97 | 
 98 | Circular.propTypes = {
 99 | 
100 |     /**
101 | 	 * Background of the spinner
102 | 	 * default is #333
103 | 	 */
104 |     color: PropTypes.string,
105 | 
106 |     /**
107 | 	 * Size of the spinner
108 | 	 * default is 40px
109 | 	 */
110 |     size: PropTypes.string
111 | }
112 | 


--------------------------------------------------------------------------------
/lib/components/DotScale/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 | 			value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n\t\tmargin: 100px auto 0;\n\t\tposition: relative;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\ttext-align: center;\n\t'], ['\n\t\tmargin: 100px auto 0;\n\t\tposition: relative;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\ttext-align: center;\n\t']),
 8 |     _templateObject2 = _taggedTemplateLiteral(['\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\tborder-radius: 100%;\n\t\tdisplay: inline-block;\n\t\tbackground-color: ', ';\n\t\tanimation: ', ' 1.4s infinite ease-in-out both;\n\t\tanimation-duration: ', ';\n\t'], ['\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\tborder-radius: 100%;\n\t\tdisplay: inline-block;\n\t\tbackground-color: ', ';\n\t\tanimation: ', ' 1.4s infinite ease-in-out both;\n\t\tanimation-duration: ', ';\n\t']),
 9 |     _templateObject3 = _taggedTemplateLiteral([' animation-delay: -0.32s; '], [' animation-delay: -0.32s; ']),
10 |     _templateObject4 = _taggedTemplateLiteral([' animation-delay: -0.16s; '], [' animation-delay: -0.16s; ']);
11 | 
12 | var _preact = require('preact');
13 | 
14 | var _propTypes = require('prop-types');
15 | 
16 | var _propTypes2 = _interopRequireDefault(_propTypes);
17 | 
18 | var _styledComponents = require('styled-components');
19 | 
20 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
21 | 
22 | var _animations = require('../../utils/animations');
23 | 
24 | var _defaults = require('../../utils/defaults');
25 | 
26 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27 | 
28 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
29 | 
30 | var DotScale = function DotScale(_ref) {
31 | 			var color = _ref.color,
32 | 			    duration = _ref.duration,
33 | 			    size = _ref.size,
34 | 			    dotSize = _ref.dotSize;
35 | 
36 | 			var Spinner = _styledComponents2.default.div(_templateObject, (0, _defaults.getSize)(size), (0, _defaults.getSize)(size));
37 | 
38 | 			var DefaultDot = _styledComponents2.default.div(_templateObject2, function (props) {
39 | 						return props.dotSize ? props.dotSize : '18px';
40 | 			}, function (props) {
41 | 						return props.dotSize ? props.dotSize : '18px';
42 | 			}, (0, _defaults.getColor)(color), _animations.dots, function (props) {
43 | 						return props.duration ? props.duration : '1.4s';
44 | 			});
45 | 
46 | 			var Dot1 = DefaultDot.extend(_templateObject3);
47 | 
48 | 			var Dot2 = DefaultDot.extend(_templateObject4);
49 | 
50 | 			return (0, _preact.h)(
51 | 						Spinner,
52 | 						{ size: size },
53 | 						(0, _preact.h)(Dot1, { color: color, duration: duration, dotSize: dotSize }),
54 | 						(0, _preact.h)(Dot2, { color: color, duration: duration, dotSize: dotSize })
55 | 			);
56 | };
57 | 
58 | exports.default = DotScale;
59 | 
60 | 
61 | DotScale.propTypes = {
62 | 
63 | 			/**
64 |    * Background of the spinner
65 |    * default is #333
66 |    */
67 | 			color: _propTypes2.default.string,
68 | 
69 | 			/**
70 |    * Animation duration
71 |    * default is 1.2s
72 |    */
73 | 			duration: _propTypes2.default.string,
74 | 
75 | 			/**
76 |    * Size of the spinner
77 |    * default is 40px
78 |    */
79 | 			size: _propTypes2.default.string,
80 | 
81 | 			/**
82 |    * Size of the dots
83 |    * default is 18px
84 |    */
85 | 			dotSize: _propTypes2.default.string
86 | };


--------------------------------------------------------------------------------
/lib/components/Stretch/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 | 			value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\ttext-align: center;\n\t\tfont-size: 10px;\n\t\theight: ', ';\n\t'], ['\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\ttext-align: center;\n\t\tfont-size: 10px;\n\t\theight: ', ';\n\t']),
 8 |     _templateObject2 = _taggedTemplateLiteral(['\n\t\tbackground-color: ', ';\n\t\theight: 100%;\n\t\twidth: ', ';\n\t\tdisplay: inline-block;\n\t\tanimation: ', ' 1.2s infinite ease-in-out;\n\t\tanimation-duration: ', 's;\n\t'], ['\n\t\tbackground-color: ', ';\n\t\theight: 100%;\n\t\twidth: ', ';\n\t\tdisplay: inline-block;\n\t\tanimation: ', ' 1.2s infinite ease-in-out;\n\t\tanimation-duration: ', 's;\n\t']),
 9 |     _templateObject3 = _taggedTemplateLiteral(['\n\t\tanimation-delay: -', 's;\n\t'], ['\n\t\tanimation-delay: -', 's;\n\t']);
10 | 
11 | var _preact = require('preact');
12 | 
13 | var _propTypes = require('prop-types');
14 | 
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
16 | 
17 | var _styledComponents = require('styled-components');
18 | 
19 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
20 | 
21 | var _animations = require('../../utils/animations');
22 | 
23 | var _defaults = require('../../utils//defaults');
24 | 
25 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26 | 
27 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
28 | 
29 | var Stretch = function Stretch(_ref) {
30 | 			var color = _ref.color,
31 | 			    duration = _ref.duration,
32 | 			    size = _ref.size;
33 | 
34 | 			var durationTime = function durationTime(durationT) {
35 | 						return durationT ? parseInt(durationT, 10) : 1.2;
36 | 			};
37 | 			var Spinner = _styledComponents2.default.div(_templateObject, function (props) {
38 | 						return props.size ? props.size : '50px';
39 | 			}, (0, _defaults.getSize)(size));
40 | 
41 | 			var DefaultRect = _styledComponents2.default.div(_templateObject2, (0, _defaults.getColor)(color), function (props) {
42 | 						return props.rectWidth ? props.rectWidth : '6px';
43 | 			}, _animations.stretch, durationTime(duration));
44 | 
45 | 			var Rect2 = DefaultRect.extend(_templateObject3, durationTime(duration) - 0.1);
46 | 			var Rect3 = DefaultRect.extend(_templateObject3, durationTime(duration) - 0.2);
47 | 			var Rect4 = DefaultRect.extend(_templateObject3, durationTime(duration) - 0.3);
48 | 			var Rect5 = DefaultRect.extend(_templateObject3, durationTime(duration) - 0.4);
49 | 
50 | 			return (0, _preact.h)(
51 | 						Spinner,
52 | 						{ size: size },
53 | 						(0, _preact.h)(DefaultRect, null),
54 | 						(0, _preact.h)(Rect2, null),
55 | 						(0, _preact.h)(Rect3, null),
56 | 						(0, _preact.h)(Rect4, null),
57 | 						(0, _preact.h)(Rect5, null)
58 | 			);
59 | };
60 | 
61 | exports.default = Stretch;
62 | 
63 | 
64 | Stretch.propTypes = {
65 | 
66 | 			/**
67 |    * Background of the spinner
68 |    * default is #333
69 |    */
70 | 			color: _propTypes2.default.string,
71 | 
72 | 			/**
73 |    * Width of each rectangle
74 |    * default is 6px
75 |    */
76 | 			rectWidth: _propTypes2.default.string,
77 | 
78 | 			/**
79 |    * Animation duration
80 |    * default is 1.2s
81 |    */
82 | 			duration: _propTypes2.default.string,
83 | 
84 | 			/**
85 |    * Size of the spinner
86 |    * default is 40px
87 |    */
88 | 			size: _propTypes2.default.string
89 | };


--------------------------------------------------------------------------------
/lib/components/CubeGrid/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 | 			value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n\t\tposition: relative;\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t'], ['\n\t\tposition: relative;\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t']),
 8 |     _templateObject2 = _taggedTemplateLiteral(['\n\t\twidth: 33%;\n\t\theight: 33%;\n\t\tbackground-color: ', ';\n\t\tfloat: left;\n\t\tanimation: ', ' 1.3s infinite ease-in-out;\n\t'], ['\n\t\twidth: 33%;\n\t\theight: 33%;\n\t\tbackground-color: ', ';\n\t\tfloat: left;\n\t\tanimation: ', ' 1.3s infinite ease-in-out;\n\t']),
 9 |     _templateObject3 = _taggedTemplateLiteral(['\n\t\tanimation-delay: 0.2s;\n\t'], ['\n\t\tanimation-delay: 0.2s;\n\t']),
10 |     _templateObject4 = _taggedTemplateLiteral(['\n\t\tanimation-delay: 0.3s;\n\t'], ['\n\t\tanimation-delay: 0.3s;\n\t']),
11 |     _templateObject5 = _taggedTemplateLiteral(['\n\t\tanimation-delay: 0.4s;\n\t'], ['\n\t\tanimation-delay: 0.4s;\n\t']),
12 |     _templateObject6 = _taggedTemplateLiteral(['\n\t\tanimation-delay: 0.1s;\n\t'], ['\n\t\tanimation-delay: 0.1s;\n\t']),
13 |     _templateObject7 = _taggedTemplateLiteral(['\n\t\tanimation-delay: 0s;\n\t'], ['\n\t\tanimation-delay: 0s;\n\t']);
14 | 
15 | var _preact = require('preact');
16 | 
17 | var _propTypes = require('prop-types');
18 | 
19 | var _propTypes2 = _interopRequireDefault(_propTypes);
20 | 
21 | var _styledComponents = require('styled-components');
22 | 
23 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
24 | 
25 | var _animations = require('../../utils/animations');
26 | 
27 | var _defaults = require('../../utils//defaults');
28 | 
29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30 | 
31 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
32 | 
33 | var CubeGrid = function CubeGrid(_ref) {
34 | 			var color = _ref.color,
35 | 			    size = _ref.size;
36 | 
37 | 			var Spinner = _styledComponents2.default.div(_templateObject, (0, _defaults.getSize)(size), (0, _defaults.getSize)(size));
38 | 
39 | 			var Cube = _styledComponents2.default.div(_templateObject2, (0, _defaults.getColor)(color), _animations.grid);
40 | 
41 | 			var Cube1 = Cube.extend(_templateObject3);
42 | 			var Cube2 = Cube.extend(_templateObject4);
43 | 			var Cube3 = Cube.extend(_templateObject5);
44 | 			var Cube4 = Cube.extend(_templateObject6);
45 | 			var Cube5 = Cube.extend(_templateObject3);
46 | 			var Cube6 = Cube.extend(_templateObject4);
47 | 			var Cube7 = Cube.extend(_templateObject7);
48 | 			var Cube8 = Cube.extend(_templateObject6);
49 | 			var Cube9 = Cube.extend(_templateObject3);
50 | 
51 | 			return (0, _preact.h)(
52 | 						Spinner,
53 | 						{ size: size },
54 | 						(0, _preact.h)(Cube1, { color: color }),
55 | 						(0, _preact.h)(Cube2, { color: color }),
56 | 						(0, _preact.h)(Cube3, { color: color }),
57 | 						(0, _preact.h)(Cube4, { color: color }),
58 | 						(0, _preact.h)(Cube5, { color: color }),
59 | 						(0, _preact.h)(Cube6, { color: color }),
60 | 						(0, _preact.h)(Cube7, { color: color }),
61 | 						(0, _preact.h)(Cube8, { color: color }),
62 | 						(0, _preact.h)(Cube9, { color: color })
63 | 			);
64 | };
65 | 
66 | exports.default = CubeGrid;
67 | 
68 | 
69 | CubeGrid.propTypes = {
70 | 
71 | 			/**
72 |    * Background of the spinner
73 |    * default is #333
74 |    */
75 | 			color: _propTypes2.default.string,
76 | 
77 | 			/**
78 |    * Size of the spinner
79 |    * default is 40px
80 |    */
81 | 			size: _propTypes2.default.string
82 | };


--------------------------------------------------------------------------------
/lib/utils/animations.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | exports.bar = exports.grid = exports.circular = exports.dots = exports.bounce = exports.rotate = exports.scale = exports.cube = exports.stretch = exports.pulsate = exports.rotateplane = undefined;
 7 | 
 8 | var _templateObject = _taggedTemplateLiteral(['\n  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }\n\n\t50% {\n\t\ttransform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n  }\n\n\t100% {\n\t\ttransform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n\t}\n'], ['\n  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }\n\n\t50% {\n\t\ttransform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n  }\n\n\t100% {\n\t\ttransform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n\t}\n']),
 9 |     _templateObject2 = _taggedTemplateLiteral(['\n  0%,\n  100% {\n    transform: scale(0);\n  }\n\n  50% {\n    transform: scale(1);\n  }\n'], ['\n  0%,\n  100% {\n    transform: scale(0);\n  }\n\n  50% {\n    transform: scale(1);\n  }\n']),
10 |     _templateObject3 = _taggedTemplateLiteral(['\n  0%,\n  40%,\n  100% {\n    transform: scaleY(0.4);\n  }\n\n  20% {\n    transform: scaleY(1);\n\t}\n'], ['\n  0%,\n  40%,\n  100% {\n    transform: scaleY(0.4);\n  }\n\n  20% {\n    transform: scaleY(1);\n\t}\n']),
11 |     _templateObject4 = _taggedTemplateLiteral(['\n  25% {\n    transform: translateX(42px) rotate(-90deg) scale(0.5);\n  }\n\n  50% {\n    transform: translateX(42px) translateY(42px) rotate(-179deg);\n  }\n\n  50.1% {\n    transform: translateX(42px) translateY(42px) rotate(-180deg);\n  }\n\n  75% {\n    transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);\n  }\n\n  100% {\n    transform: rotate(-360deg);\n  }\n'], ['\n  25% {\n    transform: translateX(42px) rotate(-90deg) scale(0.5);\n  }\n\n  50% {\n    transform: translateX(42px) translateY(42px) rotate(-179deg);\n  }\n\n  50.1% {\n    transform: translateX(42px) translateY(42px) rotate(-180deg);\n  }\n\n  75% {\n    transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5);\n  }\n\n  100% {\n    transform: rotate(-360deg);\n  }\n']),
12 |     _templateObject5 = _taggedTemplateLiteral(['\n  0% {\n    transform: scale(0);\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0;\n  }\n'], ['\n  0% {\n    transform: scale(0);\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0;\n  }\n']),
13 |     _templateObject6 = _taggedTemplateLiteral(['\n   100% { transform: rotate(360deg); }\n'], ['\n   100% { transform: rotate(360deg); }\n']),
14 |     _templateObject7 = _taggedTemplateLiteral(['\n  0%,\n  80%,\n  100% {\n    transform: scale(0);\n  }\n\n  40% {\n    transform: scale(1);\n  }\n'], ['\n  0%,\n  80%,\n  100% {\n    transform: scale(0);\n  }\n\n  40% {\n    transform: scale(1);\n  }\n']),
15 |     _templateObject8 = _taggedTemplateLiteral(['\n  0%,\n  70%,\n  100% {\n    transform: scale3D(1, 1, 1);\n  }\n\n  35% {\n    transform: scale3D(0, 0, 1);\n  }\n'], ['\n  0%,\n  70%,\n  100% {\n    transform: scale3D(1, 1, 1);\n  }\n\n  35% {\n    transform: scale3D(0, 0, 1);\n  }\n']),
16 |     _templateObject9 = _taggedTemplateLiteral(['\n\t0% {\n\t\tleft: calc(50% - 100px);\n\t}\n\n\t100% {\n\t\tleft: calc(50% - -50px);\n\t}\n'], ['\n\t0% {\n\t\tleft: calc(50% - 100px);\n\t}\n\n\t100% {\n\t\tleft: calc(50% - -50px);\n\t}\n']);
17 | 
18 | var _styledComponents = require('styled-components');
19 | 
20 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
21 | 
22 | var rotateplane = exports.rotateplane = (0, _styledComponents.keyframes)(_templateObject);
23 | 
24 | var pulsate = exports.pulsate = (0, _styledComponents.keyframes)(_templateObject2);
25 | 
26 | var stretch = exports.stretch = (0, _styledComponents.keyframes)(_templateObject3);
27 | 
28 | var cube = exports.cube = (0, _styledComponents.keyframes)(_templateObject4);
29 | 
30 | var scale = exports.scale = (0, _styledComponents.keyframes)(_templateObject5);
31 | 
32 | var rotate = exports.rotate = (0, _styledComponents.keyframes)(_templateObject6);
33 | 
34 | var bounce = exports.bounce = (0, _styledComponents.keyframes)(_templateObject2);
35 | 
36 | var dots = exports.dots = (0, _styledComponents.keyframes)(_templateObject7);
37 | 
38 | var circular = exports.circular = (0, _styledComponents.keyframes)(_templateObject7);
39 | 
40 | var grid = exports.grid = (0, _styledComponents.keyframes)(_templateObject8);
41 | 
42 | var bar = exports.bar = (0, _styledComponents.keyframes)(_templateObject9);


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
  1 | # Styled Loaders
  2 | 
  3 | <!-- [![npm](https://img.shields.io/npm/dt/express.svg)](https://www.npmjs.com/package/styled-loaders) -->
  4 | [![Build Status](https://travis-ci.org/SaraVieira/styled-loaders.svg?branch=master)](https://travis-ci.org/SaraVieira/styled-loaders)
  5 | [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
  6 | [![npm version](https://badge.fury.io/js/styled-loaders.svg)](https://npmjs.com/styled-loaders)
  7 | 
  8 | 
  9 | 
 10 | ## [Demo](https://styled-loaders.now.sh/)
 11 | ## [NPM](https://npmjs.com/styled-loaders)
 12 | 
 13 | Loaders Built with Preact and Styled Components ready for your next project because no one deserves to have to writes loadings all the time.
 14 | 
 15 | If you are looking for a React version you can find one [here](https://github.com/saisandeepvaddi/styled-loaders-react) by the awesome [Sai Sandeep Vaddi](https://github.com/saisandeepvaddi)
 16 | 
 17 | Credits and inspiration also belong heavily to the awesome work at  [SpinKit](http://tobiasahlin.com/spinkit/)
 18 | 
 19 | As I work on more projects over time more, more loaders will be added here.
 20 | 
 21 | ## Usage
 22 | 
 23 | ```
 24 | npm i styled-loaders
 25 | or
 26 | yarn add styled-loaders
 27 | ```
 28 | 
 29 | ```js
 30 | import { h } from 'preact'
 31 | import { Cube } from 'styled-loaders'
 32 | 
 33 | const Page = ({ loading }) =>
 34 |     <main>
 35 |         { loading ?
 36 |             <Cube/>
 37 |             : 'Your Content'
 38 |         }
 39 |     </main>
 40 | 
 41 | ```
 42 | ### With Props
 43 | 
 44 | ```js
 45 | import { h } from 'preact'
 46 | import { Block } from 'styled-loaders'
 47 | 
 48 | const Page = ({ loading }) =>
 49 |     <main>
 50 |         { loading ?
 51 |             <Block color="red" size="60px" duration="5s" />
 52 |             : 'Your Content'
 53 |         }
 54 |     </main>
 55 | 
 56 | ```
 57 | 
 58 | ### Loaders
 59 | 
 60 | * Block
 61 | ![Block](https://media.giphy.com/media/l378dJlRt7fvGHyfK/giphy.gif)
 62 |     * Props
 63 |         * color	- Background of the spinner default is #333
 64 |         * duration - Animation duration default is 1.2s
 65 |         * size - Size of the spinner default is 40px
 66 | 
 67 | * Circular
 68 | ![Circular](https://media.giphy.com/media/l378y26cIAwgAVt4s/giphy.gif)
 69 |     * Props
 70 |         * color	- Background of the spinner default is #333
 71 |         * size - Size of the spinner default is 40px
 72 | 
 73 | * Cube
 74 | ![Cube](https://media.giphy.com/media/3ov9jExQcWP6KTX1FS/giphy.gif)
 75 |     * Props
 76 |         * color	- Background of the spinner default is #333
 77 |         * size - Size of the spinner default is 40px
 78 |         * cubeSize - Size of the each cube default is 15
 79 |         * duration - Animation duration default is 1.2s
 80 | 
 81 | * CubeGrid
 82 | ![CubeGrid](https://media.giphy.com/media/3ov9k9cASC7gCxpuLu/giphy.gif)
 83 |     * Props
 84 |         * color	- Background of the spinner default is #333
 85 |         * size - Size of the spinner default is 40px
 86 | 
 87 | * DotScale
 88 | ![DotScale](https://media.giphy.com/media/l378c6525UOkzozVS/giphy.gif)
 89 |     * Props
 90 |         * color	- Background of the spinner default is #333
 91 |         * duration - Animation duration default is 1.2s
 92 |         * size - Size of the spinner default is 40px
 93 |         * dotSize - Size of the dots default is 18px
 94 | 
 95 | * Pulsate
 96 | ![Pulsate](https://media.giphy.com/media/l378ar9YphdtfvkYg/giphy.gif)
 97 |     * Props
 98 |         * color	- Background of the spinner default is #333
 99 |         * duration - Animation duration default is 1.2s
100 |         * size - Size of the spinner default is 40px
101 | 
102 | * RotateScale
103 | ![RotateScale](https://media.giphy.com/media/l378kTgu2VkGC8kyk/giphy.gif)
104 |     * Props
105 |         * color	- Background of the spinner default is #333
106 |         * duration - Animation duration default is 1.2s
107 |         * size - Size of the spinner default is 40px
108 | 
109 | * Scale
110 | ![Scale](https://media.giphy.com/media/l378mCuj3oh3HwMjm/giphy.gif)
111 |     * Props
112 |         * color	- Background of the spinner default is #333
113 |         * duration - Animation duration default is 1.2s
114 |         * size - Size of the spinner default is 40px
115 | 
116 | * Stretch
117 | ![Stretch](https://media.giphy.com/media/3ov9jHpaSIMfW0p19m/giphy.gif)
118 |     * Props
119 |         * color	- Background of the spinner default is #333
120 |         * duration - Animation duration default is 1.2s
121 |         * size - Size of the spinner default is 40px
122 |         * rectWidth - Width of each rectangle default is 6px
123 | 
124 | 
125 | ## License
126 | 
127 | MIT (2017 - Sara Vieira)
128 | 


--------------------------------------------------------------------------------
/lib/components/Circular/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | var _templateObject = _taggedTemplateLiteral(['\n\t\tposition: relative;\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\t'], ['\n\t\tposition: relative;\n\t\tmargin: 100px auto;\n\t\twidth: ', ';\n\t\theight: ', ';\n\t\t']),
 8 |     _templateObject2 = _taggedTemplateLiteral(['\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\t&::before {\n\t\t\tcontent: \'\';\n\t\t\tdisplay: block;\n\t\t\tmargin: 0 auto;\n\t\t\twidth: 15%;\n\t\t\theight: 15%;\n\t\t\tbackground-color: ', ';\n\t\t\tborder-radius: 100%;\n\t\t\tanimation: ', ' 1.2s infinite ease-in-out both;\n\t\t}\n\t'], ['\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\n\t\t&::before {\n\t\t\tcontent: \'\';\n\t\t\tdisplay: block;\n\t\t\tmargin: 0 auto;\n\t\t\twidth: 15%;\n\t\t\theight: 15%;\n\t\t\tbackground-color: ', ';\n\t\t\tborder-radius: 100%;\n\t\t\tanimation: ', ' 1.2s infinite ease-in-out both;\n\t\t}\n\t']),
 9 |     _templateObject3 = _taggedTemplateLiteral(['\n        transform: rotate(30deg);\n        &::before { animation-delay: -1.1s; }\n    '], ['\n        transform: rotate(30deg);\n        &::before { animation-delay: -1.1s; }\n    ']),
10 |     _templateObject4 = _taggedTemplateLiteral(['\n        transform: rotate(60deg);\n        &::before { animation-delay: -1s; }\n    '], ['\n        transform: rotate(60deg);\n        &::before { animation-delay: -1s; }\n    ']),
11 |     _templateObject5 = _taggedTemplateLiteral(['\n        transform: rotate(90deg);\n        &::before { animation-delay: -0.9s; }\n    '], ['\n        transform: rotate(90deg);\n        &::before { animation-delay: -0.9s; }\n    ']),
12 |     _templateObject6 = _taggedTemplateLiteral(['\n        transform: rotate(120deg);\n        &::before { animation-delay: -0.8s; }\n    '], ['\n        transform: rotate(120deg);\n        &::before { animation-delay: -0.8s; }\n    ']),
13 |     _templateObject7 = _taggedTemplateLiteral(['\n        transform: rotate(150deg);\n        &::before { animation-delay: -0.7s; }\n    '], ['\n        transform: rotate(150deg);\n        &::before { animation-delay: -0.7s; }\n    ']),
14 |     _templateObject8 = _taggedTemplateLiteral(['\n        transform: rotate(180deg);\n        &::before { animation-delay: -0.6s; }\n    '], ['\n        transform: rotate(180deg);\n        &::before { animation-delay: -0.6s; }\n    ']),
15 |     _templateObject9 = _taggedTemplateLiteral(['\n        transform: rotate(210deg);\n        &::before { animation-delay: -0.5s; }\n    '], ['\n        transform: rotate(210deg);\n        &::before { animation-delay: -0.5s; }\n    ']),
16 |     _templateObject10 = _taggedTemplateLiteral(['\n        transform: rotate(240deg);\n        &::before { animation-delay: -0.4s; }\n    '], ['\n        transform: rotate(240deg);\n        &::before { animation-delay: -0.4s; }\n    ']),
17 |     _templateObject11 = _taggedTemplateLiteral(['\n        transform: rotate(270deg);\n        &::before { animation-delay: -0.3s; }\n    '], ['\n        transform: rotate(270deg);\n        &::before { animation-delay: -0.3s; }\n    ']),
18 |     _templateObject12 = _taggedTemplateLiteral(['\n        transform: rotate(300deg);\n        &::before { animation-delay: -0.2s; }\n    '], ['\n        transform: rotate(300deg);\n        &::before { animation-delay: -0.2s; }\n    ']),
19 |     _templateObject13 = _taggedTemplateLiteral(['\n        transform: rotate(330deg);\n        &::before { animation-delay: -0.1s; }\n    '], ['\n        transform: rotate(330deg);\n        &::before { animation-delay: -0.1s; }\n    ']);
20 | 
21 | var _preact = require('preact');
22 | 
23 | var _propTypes = require('prop-types');
24 | 
25 | var _propTypes2 = _interopRequireDefault(_propTypes);
26 | 
27 | var _styledComponents = require('styled-components');
28 | 
29 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
30 | 
31 | var _animations = require('../../utils/animations');
32 | 
33 | var _defaults = require('../../utils//defaults');
34 | 
35 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
36 | 
37 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
38 | 
39 | var Circular = function Circular(_ref) {
40 |     var color = _ref.color,
41 |         size = _ref.size;
42 | 
43 |     var Spinner = _styledComponents2.default.div(_templateObject, (0, _defaults.getSize)(size), (0, _defaults.getSize)(size));
44 |     var Circle = _styledComponents2.default.div(_templateObject2, (0, _defaults.getColor)(color), _animations.circular);
45 | 
46 |     var Circle2 = Circle.extend(_templateObject3);
47 |     var Circle3 = Circle.extend(_templateObject4);
48 |     var Circle4 = Circle.extend(_templateObject5);
49 |     var Circle5 = Circle.extend(_templateObject6);
50 |     var Circle6 = Circle.extend(_templateObject7);
51 |     var Circle7 = Circle.extend(_templateObject8);
52 |     var Circle8 = Circle.extend(_templateObject9);
53 |     var Circle9 = Circle.extend(_templateObject10);
54 |     var Circle10 = Circle.extend(_templateObject11);
55 |     var Circle11 = Circle.extend(_templateObject12);
56 |     var Circle12 = Circle.extend(_templateObject13);
57 | 
58 |     return (0, _preact.h)(
59 |         Spinner,
60 |         { size: size },
61 |         (0, _preact.h)(Circle, { color: color }),
62 |         (0, _preact.h)(Circle2, { color: color }),
63 |         (0, _preact.h)(Circle3, { color: color }),
64 |         (0, _preact.h)(Circle4, { color: color }),
65 |         (0, _preact.h)(Circle5, { color: color }),
66 |         (0, _preact.h)(Circle6, { color: color }),
67 |         (0, _preact.h)(Circle7, { color: color }),
68 |         (0, _preact.h)(Circle8, { color: color }),
69 |         (0, _preact.h)(Circle9, { color: color }),
70 |         (0, _preact.h)(Circle10, { color: color }),
71 |         (0, _preact.h)(Circle11, { color: color }),
72 |         (0, _preact.h)(Circle12, { color: color })
73 |     );
74 | };
75 | 
76 | exports.default = Circular;
77 | 
78 | 
79 | Circular.propTypes = {
80 | 
81 |     /**
82 |     * Background of the spinner
83 |     * default is #333
84 |     */
85 |     color: _propTypes2.default.string,
86 | 
87 |     /**
88 |     * Size of the spinner
89 |     * default is 40px
90 |     */
91 |     size: _propTypes2.default.string
92 | };


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