├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .stylelintrc ├── .travis.yml ├── LICENSE ├── Readme.md ├── lib ├── components │ ├── Bar │ │ └── index.js │ ├── Block │ │ └── index.js │ ├── Circular │ │ └── index.js │ ├── Cube │ │ └── index.js │ ├── CubeGrid │ │ └── index.js │ ├── DotScale │ │ └── index.js │ ├── Pulsate │ │ └── index.js │ ├── RotateScale │ │ └── index.js │ ├── Scale │ │ └── index.js │ └── Stretch │ │ └── index.js ├── index.js └── utils │ ├── animations.js │ └── defaults.js ├── package.json ├── src ├── components │ ├── Bar │ │ ├── Readme.md │ │ └── index.js │ ├── Block │ │ ├── Readme.md │ │ └── index.js │ ├── Circular │ │ ├── Readme.md │ │ └── index.js │ ├── Cube │ │ ├── Readme.md │ │ └── index.js │ ├── CubeGrid │ │ ├── Readme.md │ │ └── index.js │ ├── DotScale │ │ ├── Readme.md │ │ └── index.js │ ├── Pulsate │ │ ├── Readme.md │ │ └── index.js │ ├── RotateScale │ │ ├── Readme.md │ │ └── index.js │ ├── Scale │ │ ├── Readme.md │ │ └── index.js │ └── Stretch │ │ ├── Readme.md │ │ └── index.js ├── index.js └── utils │ ├── animations.js │ └── defaults.js ├── styleguide.config.js └── yarn.lock /.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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: 'flying-rocket', 3 | rules: { 4 | "react/require-default-props": 0 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | License (MIT) 2 | 3 | Copyright 2017 Sara Vieira 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. -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Styled Loaders 2 | 3 | 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 |
35 | { loading ? 36 | 37 | : 'Your Content' 38 | } 39 |
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 |
50 | { loading ? 51 | 52 | : 'Your Content' 53 | } 54 |
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/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/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/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 | }; -------------------------------------------------------------------------------- /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/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/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/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/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 | }; -------------------------------------------------------------------------------- /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 | }; -------------------------------------------------------------------------------- /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/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/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); -------------------------------------------------------------------------------- /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 | }; -------------------------------------------------------------------------------- /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/Readme.md: -------------------------------------------------------------------------------- 1 | ```js 2 | 3 | ``` 4 | 5 | ```js 6 | 7 | ``` 8 | 9 | ```js 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /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 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/Block/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` 13 | 14 | ```js 15 | 16 | ``` -------------------------------------------------------------------------------- /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 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/Circular/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` -------------------------------------------------------------------------------- /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 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 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 | -------------------------------------------------------------------------------- /src/components/Cube/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` 13 | 14 | ```js 15 | 16 | ``` -------------------------------------------------------------------------------- /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 | 30 | 31 | 32 | 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/CubeGrid/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` -------------------------------------------------------------------------------- /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 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 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/DotScale/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` 13 | 14 | ```js 15 | 16 | ``` -------------------------------------------------------------------------------- /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 | 32 | 33 | 34 | 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/Pulsate/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` 13 | 14 | ```js 15 | 16 | ``` -------------------------------------------------------------------------------- /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 | 32 | 33 | 34 | 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/RotateScale/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` 13 | 14 | ```js 15 | 16 | ``` -------------------------------------------------------------------------------- /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 | 38 | 39 | 40 | 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/Scale/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` 13 | 14 | ```js 15 | 16 | ``` -------------------------------------------------------------------------------- /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 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 | -------------------------------------------------------------------------------- /src/components/Stretch/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ```js 3 | 4 | ``` 5 | 6 | ```js 7 | 8 | ``` 9 | 10 | ```js 11 | 12 | ``` 13 | 14 | ```js 15 | 16 | ``` -------------------------------------------------------------------------------- /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 | 41 | 42 | 43 | 44 | 45 | 46 | 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/utils/defaults.js: -------------------------------------------------------------------------------- 1 | export const getSize = size => size || '40px' 2 | 3 | export const getColor = color => color || '#333' 4 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------