├── .all-contributorsrc ├── .editorconfig ├── .eslintrc ├── .flowconfig ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .stylelintrc ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── example ├── index.html └── index.tsx ├── jest.config.js ├── package.json ├── readme.md ├── renovate.json ├── rollup.config.js ├── setupTest.ts ├── src ├── ChasingDots │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── Circle │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── CubeGrid │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── DoubleBounce │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── FadingCircle │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── FoldingCube │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── Pulse │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── RotaingPlane │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── ThreeBounce │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── WanderingCubes │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── WaveLoading │ ├── __snapshots__ │ │ └── index.test.tsx.snap │ ├── index.test.tsx │ ├── index.tsx │ └── styles.tsx ├── index.ts ├── types.ts └── util │ ├── index.test.tsx │ └── index.tsx ├── tsconfig.json └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "styled-spinkit", 3 | "projectOwner": "akameco", 4 | "files": [ 5 | "readme.md" 6 | ], 7 | "imageSize": 100, 8 | "commit": true, 9 | "contributors": [ 10 | { 11 | "login": "akameco", 12 | "name": "akameco", 13 | "avatar_url": "https://avatars2.githubusercontent.com/u/4002137?v=4", 14 | "profile": "http://akameco.github.io", 15 | "contributions": [ 16 | "code", 17 | "doc", 18 | "test", 19 | "infra" 20 | ] 21 | }, 22 | { 23 | "login": "jrusx", 24 | "name": "jrusx", 25 | "avatar_url": "https://avatars1.githubusercontent.com/u/19670625?v=4", 26 | "profile": "https://github.com/jrusx", 27 | "contributions": [ 28 | "code", 29 | "bug" 30 | ] 31 | }, 32 | { 33 | "login": "Annihil", 34 | "name": "Bap ☺", 35 | "avatar_url": "https://avatars3.githubusercontent.com/u/16704309?v=4", 36 | "profile": "http://stackoverflow.com/users/6174694/annihil", 37 | "contributions": [ 38 | "code" 39 | ] 40 | }, 41 | { 42 | "login": "mrpandat", 43 | "name": "KagXaef", 44 | "avatar_url": "https://avatars1.githubusercontent.com/u/22916835?v=4", 45 | "profile": "https://github.com/mrpandat", 46 | "contributions": [ 47 | "code" 48 | ] 49 | } 50 | ], 51 | "repoType": "github", 52 | "commitConvention": "none" 53 | } 54 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["precure", "precure/react", "precure/jest", "precure/typescript"], 3 | "rules": { 4 | "unicorn/prefer-spread": 0, 5 | "unicorn/prevent-abbreviations": 0, 6 | "@typescript-eslint/explicit-function-return-type": 0, 7 | "react/prop-types": 0 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/styled-components/.* 3 | .*/lib/.* 4 | .*/dest/.* 5 | 6 | [include] 7 | 8 | [libs] 9 | 10 | [lints] 11 | 12 | [options] 13 | emoji=true 14 | 15 | [strict] 16 | 17 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | *.js text eol=lf 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | - version: 10 | - `node` version: 11 | - `npm` (or `yarn`) version: 12 | 13 | **Do you want to request a *feature* or report a *bug*?:** 14 | 15 | **What is the current behavior?:** 16 | 17 | **What is the expected behavior?:** 18 | 19 | **Suggested solution:** 20 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | **What**: 8 | 9 | 10 | 11 | **Why**: 12 | 13 | 14 | 15 | **How**: 16 | 17 | 18 | **Checklist**: 19 | 20 | 21 | * [ ] Documentation 22 | * [ ] Tests 23 | * [ ] Ready to be merged 24 | 25 | 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | /storybook-static 20 | /lib 21 | /dist 22 | /compiled 23 | .cache 24 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | coverage 2 | lib 3 | dist 4 | storybook-static 5 | package.json 6 | .github 7 | compiled 8 | .cache 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "processors": ["stylelint-processor-styled-components"], 3 | "extends": [ 4 | "stylelint-config-standard", 5 | "stylelint-config-styled-components" 6 | ], 7 | "syntax": "scss", 8 | "rules": { 9 | "selector-type-no-unknown": null, 10 | "selector-type-case": null, 11 | "value-list-max-empty-lines": null, 12 | "declaration-colon-newline-after": null, 13 | "rule-empty-line-before": null, 14 | "value-keyword-case": null 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '12' 4 | 5 | cache: 6 | yarn: true 7 | directories: 8 | - ".eslintcache" 9 | - "node_modules" 10 | 11 | notifications: 12 | email: false 13 | 14 | branches: 15 | only: master 16 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language 12 | - Being respectful of differing viewpoints and experiences 13 | - Gracefully accepting constructive criticism 14 | - Focusing on what is best for the community 15 | - Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | - Trolling, insulting/derogatory comments, and personal or political attacks 21 | - Public or private harassment 22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | - Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at akameco.t@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | // eslint-disable-next-line import/no-extraneous-dependencies 3 | import { render } from 'react-dom' 4 | import { 5 | ChasingDots, 6 | Circle, 7 | CubeGrid, 8 | DoubleBounce, 9 | FadingCircle, 10 | FoldingCube, 11 | Pulse, 12 | RotaingPlane, 13 | ThreeBounce, 14 | WanderingCubes, 15 | WaveLoading, 16 | } from '../src' 17 | 18 | function randomColor() { 19 | const colors = [ 20 | '#cc0066', 21 | '#eee', 22 | '#3399ff', 23 | '#99ffcc', 24 | '#6600ff', 25 | '#ff9933', 26 | '#cc0000', 27 | '#006600', 28 | '#ffcc00', 29 | ] 30 | const color = colors[Math.floor(colors.length * Math.random())] 31 | return color 32 | } 33 | 34 | const Box: React.FC = ({ children }) => ( 35 |
38 | {children} 39 |
40 | ) 41 | 42 | const Text: React.FC = ({ children }) => ( 43 |
{children}
44 | ) 45 | 46 | const ComponentName = ({ title }: { title: string }) => ( 47 | {`<${title} />`} 48 | ) 49 | 50 | const ShowSpinkit = ({ component: Component }) => { 51 | return ( 52 | 53 | 54 | 55 | 56 | ) 57 | } 58 | 59 | function App() { 60 | return ( 61 |
69 |
77 | {[ 78 | ChasingDots, 79 | Circle, 80 | CubeGrid, 81 | DoubleBounce, 82 | FadingCircle, 83 | FoldingCube, 84 | Pulse, 85 | RotaingPlane, 86 | ThreeBounce, 87 | WanderingCubes, 88 | WaveLoading, 89 | ].map((component) => ( 90 | 91 | ))} 92 |
93 |
94 | ) 95 | } 96 | 97 | render(, document.querySelector('#root')) 98 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // collectCoverageFrom: ['src/**/*.tsx?'], 3 | setupFilesAfterEnv: ['/setupTest.ts'], 4 | testPathIgnorePatterns: [ 5 | '[/\\\\](dist|compiled|node_modules)[/\\\\]', 6 | ], 7 | testEnvironment: 'jsdom', 8 | // transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'], 9 | preset: 'ts-jest', 10 | globals: { 11 | 'ts-jest': { 12 | diagnostics: false, 13 | }, 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-spinkit", 3 | "version": "1.1.0", 4 | "description": "Spinner Loading components", 5 | "license": "MIT", 6 | "repository": "akameco/styled-spinkit", 7 | "author": { 8 | "name": "akameco", 9 | "email": "akameco.t@gmail.com", 10 | "url": "https://akameco.github.io" 11 | }, 12 | "main": "dist/index.js", 13 | "jsnext:main": "dist/styled-spinkit.esm.js", 14 | "module": "dist/styled-spinkit.esm.js", 15 | "sideEffects": false, 16 | "typings": "dist/index.d.ts", 17 | "keywords": [ 18 | "react", 19 | "styled-components", 20 | "components", 21 | "Spinner", 22 | "Loading", 23 | "components" 24 | ], 25 | "scripts": { 26 | "prebuild": "rimraf dist/*", 27 | "build": "tsc && rollup -c", 28 | "postbuild": "rimraf compiled/*", 29 | "fmt": "prettier --write '**/*.{ts,tsx,js,json,md}'", 30 | "lint:css": "stylelint './src/**/*.{ts,tsx}'", 31 | "lint:js": "eslint --fix 'src/**/*.{ts,tsx}'", 32 | "lint": "npm run lint:css && npm run lint:js", 33 | "test": "jest", 34 | "dev": "parcel example/index.html", 35 | "prepublish": "npm run build" 36 | }, 37 | "lint-staged": { 38 | ".{ts,tsx,js,json,md}": [ 39 | "prettier --write" 40 | ] 41 | }, 42 | "files": [ 43 | "dist" 44 | ], 45 | "dependencies": {}, 46 | "devDependencies": { 47 | "@akameco/tsconfig": "0.4.0", 48 | "@types/jest": "25.2.1", 49 | "@types/react": "16.9.34", 50 | "@types/react-test-renderer": "16.9.2", 51 | "@types/styled-components": "5.1.0", 52 | "eslint": "6.8.0", 53 | "eslint-config-precure": "5.4.0", 54 | "husky": "4.2.5", 55 | "jest": "26.0.1", 56 | "jest-styled-components": "7.0.2", 57 | "lint-staged": "10.1.6", 58 | "parcel-bundler": "1.12.4", 59 | "prettier": "2.0.4", 60 | "react": "16.13.1", 61 | "react-dom": "16.13.1", 62 | "react-test-renderer": "16.13.1", 63 | "rimraf": "3.0.2", 64 | "rollup": "2.6.1", 65 | "rollup-plugin-node-resolve": "5.2.0", 66 | "rollup-plugin-terser": "5.3.0", 67 | "storyshots": "3.2.2", 68 | "styled-components": "5.1.0", 69 | "stylelint": "13.3.2", 70 | "stylelint-config-standard": "20.0.0", 71 | "stylelint-config-styled-components": "0.1.1", 72 | "stylelint-processor-styled-components": "1.10.0", 73 | "ts-jest": "25.4.0", 74 | "typescript": "3.8.3" 75 | }, 76 | "peerDependencies": { 77 | "react": ">=15.0.0", 78 | "styled-components": ">=5.0.0" 79 | }, 80 | "husky": { 81 | "hooks": { 82 | "pre-commit": "lint-staged" 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # styled-spinkit 2 | 3 | [![Build Status](https://travis-ci.org/akameco/styled-spinkit.svg?branch=master)](https://travis-ci.org/akameco/styled-spinkit) 4 | [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) 5 | [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) 6 | [![MIT License](https://img.shields.io/npm/l/nps.svg?style=flat-square)](./license) 7 | [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors) 8 | 9 | > Simple animation loading components with [styled-components](https://github.com/styled-components/styled-components) 10 | 11 | [![https://gyazo.com/9fdf10c73edd16495a854b199e8f9ee0](https://i.gyazo.com/9fdf10c73edd16495a854b199e8f9ee0.gif)](https://gyazo.com/9fdf10c73edd16495a854b199e8f9ee0) 12 | 13 | See [React Storybook Demo](https://akameco.github.io/styled-spinkit/?knob-color=magenta&knob-number=60&selectedKind=CubeGrid&selectedStory=render%20magenta%2060&full=0&down=1&left=1&panelRight=1&downPanel=storybook-addon-background%2Fbackground-panel) 14 | 15 | See [Bit components collection](https://bit.dev/akameco/styled-spinkit) 16 | 17 | Inspired by [SpinKit](https://github.com/tobiasahlin/SpinKit). 18 | 19 | ## Install 20 | 21 | ``` 22 | $ yarn add styled-spinkit 23 | ``` 24 | 25 | or 26 | 27 | ``` 28 | $ npm install --save styled-spinkit 29 | ``` 30 | 31 | ## API 32 | 33 | ### Components 34 | 35 | - `` 36 | - `` 37 | - `` 38 | - `` 39 | - `` 40 | - `` 41 | - `` 42 | - `` 43 | - `` 44 | - `` 45 | - `` 46 | 47 | #### Props 48 | 49 | | Prop | Type | Default | 50 | | ------- | -------- | ------- | 51 | | `color` | `string` | `#333` | 52 | | `size` | `number` | `40` | 53 | 54 | ## Contributors 55 | 56 | Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 57 | 58 | 59 | 60 |
akameco
akameco
💻 📖 ⚠️ 🚇		jrusx
jrusx
💻 🐛		Bap ☺
Bap ☺
💻		KagXaef
KagXaef
💻
61 | 62 | 63 | 64 | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome! 65 | 66 | ## License 67 | 68 | MIT © [akameco](http://akameco.github.io) 69 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@akameco"] 3 | } 4 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import resolve from 'rollup-plugin-node-resolve' 3 | import { terser } from 'rollup-plugin-terser' 4 | import pkg from './package.json' 5 | 6 | const input = './compiled/index.js' 7 | 8 | const external = (id) => !id.startsWith('.') && !path.isAbsolute(id) 9 | 10 | const buildCjs = () => ({ 11 | input, 12 | external, 13 | output: { 14 | file: pkg.main, 15 | format: 'cjs', 16 | sourcemap: true, 17 | }, 18 | plugins: [ 19 | resolve(), 20 | terser({ 21 | sourcemap: true, 22 | output: { comments: false }, 23 | warnings: true, 24 | ecma: 5, 25 | // Compress and/or mangle variables in top level scope. 26 | // @see https://github.com/terser-js/terser 27 | toplevel: true, 28 | }), 29 | ], 30 | }) 31 | 32 | export default [ 33 | buildCjs(), 34 | { 35 | input, 36 | external, 37 | output: { 38 | file: pkg.module, 39 | format: 'esm', 40 | sourcemap: true, 41 | }, 42 | plugins: [resolve()], 43 | }, 44 | ] 45 | -------------------------------------------------------------------------------- /setupTest.ts: -------------------------------------------------------------------------------- 1 | import 'jest-styled-components' 2 | -------------------------------------------------------------------------------- /src/ChasingDots/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | width: 60%; 6 | height: 60%; 7 | display: inline-block; 8 | position: absolute; 9 | top: 0; 10 | border-radius: 100%; 11 | -webkit-animation: hyvohD 2s infinite ease-in-out; 12 | animation: hyvohD 2s infinite ease-in-out; 13 | } 14 | 15 | .c3 { 16 | width: 60%; 17 | height: 60%; 18 | display: inline-block; 19 | position: absolute; 20 | top: 0; 21 | border-radius: 100%; 22 | -webkit-animation: hyvohD 2s infinite ease-in-out; 23 | animation: hyvohD 2s infinite ease-in-out; 24 | top: auto; 25 | bottom: 0; 26 | -webkit-animation-delay: -1s; 27 | animation-delay: -1s; 28 | } 29 | 30 | .c0 { 31 | width: 40px; 32 | height: 40px; 33 | margin: 40px auto; 34 | position: relative; 35 | text-align: center; 36 | -webkit-animation: cqkDSr 2s infinite linear; 37 | animation: cqkDSr 2s infinite linear; 38 | } 39 | 40 | .c0 > .c1 { 41 | background-color: #333; 42 | } 43 | 44 |
49 |
52 |
55 |
56 | `; 57 | -------------------------------------------------------------------------------- /src/ChasingDots/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/ChasingDots/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import { StyledChangeDots, Child } from './styles' 4 | 5 | const ChangeDots: React.FC = ({ 6 | size = DEFAULT_SIZE, 7 | color = DEFAULT_COLOR, 8 | className, 9 | }) => { 10 | return ( 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default ChangeDots 19 | -------------------------------------------------------------------------------- /src/ChasingDots/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes, css } from 'styled-components' 2 | 3 | import { 4 | size, 5 | propSize, 6 | propMargin, 7 | propBgColor, 8 | animationDelay, 9 | SizeProps, 10 | BgColorProps, 11 | } from '../util' 12 | 13 | const rotate = keyframes` 14 | 100% { 15 | transform: rotate(360deg); 16 | } 17 | ` 18 | 19 | const bounce = keyframes` 20 | 0%, 21 | 100% { 22 | transform: scale(0); 23 | } 24 | 50% { 25 | transform: scale(1); 26 | } 27 | ` 28 | 29 | const duration = 2 30 | 31 | export const Child = styled.div<{ second?: boolean }>` 32 | ${size('60%')}; 33 | display: inline-block; 34 | position: absolute; 35 | top: 0; 36 | border-radius: 100%; 37 | animation: ${bounce} ${duration}s infinite ease-in-out; 38 | ${(p) => 39 | p.second && 40 | css` 41 | top: auto; 42 | bottom: 0; 43 | ${animationDelay(-duration / 2)}; 44 | `}; 45 | ` 46 | 47 | export const StyledChangeDots = styled.div` 48 | ${propSize}; 49 | ${propMargin}; 50 | position: relative; 51 | text-align: center; 52 | animation: ${rotate} ${duration}s infinite linear; 53 | 54 | > ${Child} { 55 | ${propBgColor}; 56 | } 57 | ` 58 | -------------------------------------------------------------------------------- /src/Circle/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | width: 100%; 6 | height: 100%; 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | -webkit-transform: rotate(30deg); 11 | -ms-transform: rotate(30deg); 12 | transform: rotate(30deg); 13 | } 14 | 15 | .c2::before { 16 | content: ''; 17 | display: block; 18 | margin: 0 auto; 19 | width: 15%; 20 | height: 15%; 21 | border-radius: 100%; 22 | -webkit-animation: fQdAWJ 1.2s ease-in-out -1.2s infinite both; 23 | animation: fQdAWJ 1.2s ease-in-out -1.2s infinite both; 24 | } 25 | 26 | .c3 { 27 | width: 100%; 28 | height: 100%; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | -webkit-transform: rotate(60deg); 33 | -ms-transform: rotate(60deg); 34 | transform: rotate(60deg); 35 | } 36 | 37 | .c3::before { 38 | content: ''; 39 | display: block; 40 | margin: 0 auto; 41 | width: 15%; 42 | height: 15%; 43 | border-radius: 100%; 44 | -webkit-animation: fQdAWJ 1.2s ease-in-out -1.1s infinite both; 45 | animation: fQdAWJ 1.2s ease-in-out -1.1s infinite both; 46 | } 47 | 48 | .c4 { 49 | width: 100%; 50 | height: 100%; 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | -webkit-transform: rotate(90deg); 55 | -ms-transform: rotate(90deg); 56 | transform: rotate(90deg); 57 | } 58 | 59 | .c4::before { 60 | content: ''; 61 | display: block; 62 | margin: 0 auto; 63 | width: 15%; 64 | height: 15%; 65 | border-radius: 100%; 66 | -webkit-animation: fQdAWJ 1.2s ease-in-out -1s infinite both; 67 | animation: fQdAWJ 1.2s ease-in-out -1s infinite both; 68 | } 69 | 70 | .c5 { 71 | width: 100%; 72 | height: 100%; 73 | position: absolute; 74 | top: 0; 75 | left: 0; 76 | -webkit-transform: rotate(120deg); 77 | -ms-transform: rotate(120deg); 78 | transform: rotate(120deg); 79 | } 80 | 81 | .c5::before { 82 | content: ''; 83 | display: block; 84 | margin: 0 auto; 85 | width: 15%; 86 | height: 15%; 87 | border-radius: 100%; 88 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.9s infinite both; 89 | animation: fQdAWJ 1.2s ease-in-out -0.9s infinite both; 90 | } 91 | 92 | .c6 { 93 | width: 100%; 94 | height: 100%; 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | -webkit-transform: rotate(150deg); 99 | -ms-transform: rotate(150deg); 100 | transform: rotate(150deg); 101 | } 102 | 103 | .c6::before { 104 | content: ''; 105 | display: block; 106 | margin: 0 auto; 107 | width: 15%; 108 | height: 15%; 109 | border-radius: 100%; 110 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.8s infinite both; 111 | animation: fQdAWJ 1.2s ease-in-out -0.8s infinite both; 112 | } 113 | 114 | .c7 { 115 | width: 100%; 116 | height: 100%; 117 | position: absolute; 118 | top: 0; 119 | left: 0; 120 | -webkit-transform: rotate(180deg); 121 | -ms-transform: rotate(180deg); 122 | transform: rotate(180deg); 123 | } 124 | 125 | .c7::before { 126 | content: ''; 127 | display: block; 128 | margin: 0 auto; 129 | width: 15%; 130 | height: 15%; 131 | border-radius: 100%; 132 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.7s infinite both; 133 | animation: fQdAWJ 1.2s ease-in-out -0.7s infinite both; 134 | } 135 | 136 | .c8 { 137 | width: 100%; 138 | height: 100%; 139 | position: absolute; 140 | top: 0; 141 | left: 0; 142 | -webkit-transform: rotate(210deg); 143 | -ms-transform: rotate(210deg); 144 | transform: rotate(210deg); 145 | } 146 | 147 | .c8::before { 148 | content: ''; 149 | display: block; 150 | margin: 0 auto; 151 | width: 15%; 152 | height: 15%; 153 | border-radius: 100%; 154 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.6s infinite both; 155 | animation: fQdAWJ 1.2s ease-in-out -0.6s infinite both; 156 | } 157 | 158 | .c9 { 159 | width: 100%; 160 | height: 100%; 161 | position: absolute; 162 | top: 0; 163 | left: 0; 164 | -webkit-transform: rotate(240deg); 165 | -ms-transform: rotate(240deg); 166 | transform: rotate(240deg); 167 | } 168 | 169 | .c9::before { 170 | content: ''; 171 | display: block; 172 | margin: 0 auto; 173 | width: 15%; 174 | height: 15%; 175 | border-radius: 100%; 176 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.5s infinite both; 177 | animation: fQdAWJ 1.2s ease-in-out -0.5s infinite both; 178 | } 179 | 180 | .c10 { 181 | width: 100%; 182 | height: 100%; 183 | position: absolute; 184 | top: 0; 185 | left: 0; 186 | -webkit-transform: rotate(270deg); 187 | -ms-transform: rotate(270deg); 188 | transform: rotate(270deg); 189 | } 190 | 191 | .c10::before { 192 | content: ''; 193 | display: block; 194 | margin: 0 auto; 195 | width: 15%; 196 | height: 15%; 197 | border-radius: 100%; 198 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.4s infinite both; 199 | animation: fQdAWJ 1.2s ease-in-out -0.4s infinite both; 200 | } 201 | 202 | .c11 { 203 | width: 100%; 204 | height: 100%; 205 | position: absolute; 206 | top: 0; 207 | left: 0; 208 | -webkit-transform: rotate(300deg); 209 | -ms-transform: rotate(300deg); 210 | transform: rotate(300deg); 211 | } 212 | 213 | .c11::before { 214 | content: ''; 215 | display: block; 216 | margin: 0 auto; 217 | width: 15%; 218 | height: 15%; 219 | border-radius: 100%; 220 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.3s infinite both; 221 | animation: fQdAWJ 1.2s ease-in-out -0.3s infinite both; 222 | } 223 | 224 | .c12 { 225 | width: 100%; 226 | height: 100%; 227 | position: absolute; 228 | top: 0; 229 | left: 0; 230 | -webkit-transform: rotate(330deg); 231 | -ms-transform: rotate(330deg); 232 | transform: rotate(330deg); 233 | } 234 | 235 | .c12::before { 236 | content: ''; 237 | display: block; 238 | margin: 0 auto; 239 | width: 15%; 240 | height: 15%; 241 | border-radius: 100%; 242 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.2s infinite both; 243 | animation: fQdAWJ 1.2s ease-in-out -0.2s infinite both; 244 | } 245 | 246 | .c13 { 247 | width: 100%; 248 | height: 100%; 249 | position: absolute; 250 | top: 0; 251 | left: 0; 252 | -webkit-transform: rotate(360deg); 253 | -ms-transform: rotate(360deg); 254 | transform: rotate(360deg); 255 | } 256 | 257 | .c13::before { 258 | content: ''; 259 | display: block; 260 | margin: 0 auto; 261 | width: 15%; 262 | height: 15%; 263 | border-radius: 100%; 264 | -webkit-animation: fQdAWJ 1.2s ease-in-out -0.1s infinite both; 265 | animation: fQdAWJ 1.2s ease-in-out -0.1s infinite both; 266 | } 267 | 268 | .c0 { 269 | margin: 40px auto; 270 | width: 40px; 271 | height: 40px; 272 | position: relative; 273 | } 274 | 275 | .c0 > .c1::before { 276 | background-color: #333; 277 | } 278 | 279 |
284 |
288 |
292 |
296 |
300 |
304 |
308 |
312 |
316 |
320 |
324 |
328 |
332 |
333 | `; 334 | -------------------------------------------------------------------------------- /src/Circle/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/Circle/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { getRange, roundTo } from '../util' 3 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 4 | import { Child, StyledCircle } from './styles' 5 | 6 | const Circle: React.FC = ({ 7 | size = DEFAULT_SIZE, 8 | color = DEFAULT_COLOR, 9 | className, 10 | }) => { 11 | const count = 12 12 | const speed = 1.2 13 | 14 | const circles = getRange(count).map((k) => { 15 | const transform = roundTo((360 / count) * (k + 1), 1) 16 | const delay = roundTo(-speed + (speed / count) * k, 1) 17 | return 18 | }) 19 | 20 | return ( 21 | 22 | {circles} 23 | 24 | ) 25 | } 26 | 27 | export default Circle 28 | -------------------------------------------------------------------------------- /src/Circle/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | size, 4 | propSize, 5 | propMargin, 6 | propBgColor, 7 | SizeProps, 8 | BgColorProps, 9 | DelayProps, 10 | } from '../util' 11 | 12 | const scale = keyframes` 13 | 0%, 14 | 80%, 15 | 100% { 16 | transform: scale(0); 17 | } 18 | 40% { 19 | transform: scale(1); 20 | } 21 | ` 22 | 23 | type ChildProps = { transform: number } & DelayProps 24 | 25 | export const Child = styled.div` 26 | ${size('100%')}; 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | transform: rotate(${(p) => p.transform}deg); 31 | 32 | &::before { 33 | content: ''; 34 | display: block; 35 | margin: 0 auto; 36 | ${size('15%')}; 37 | border-radius: 100%; 38 | animation: ${scale} 1.2s ease-in-out ${(p) => p.delay}s infinite both; 39 | } 40 | ` 41 | 42 | export const StyledCircle = styled.div` 43 | ${propMargin}; 44 | ${propSize}; 45 | position: relative; 46 | 47 | > ${Child} { 48 | &::before { 49 | ${propBgColor}; 50 | } 51 | } 52 | ` 53 | -------------------------------------------------------------------------------- /src/CubeGrid/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | width: 33.33%; 6 | height: 33.33%; 7 | float: left; 8 | -webkit-animation: gKRhTX 1.3s infinite ease-in-out 0.2s; 9 | animation: gKRhTX 1.3s infinite ease-in-out 0.2s; 10 | } 11 | 12 | .c3 { 13 | width: 33.33%; 14 | height: 33.33%; 15 | float: left; 16 | -webkit-animation: gKRhTX 1.3s infinite ease-in-out 0.3s; 17 | animation: gKRhTX 1.3s infinite ease-in-out 0.3s; 18 | } 19 | 20 | .c4 { 21 | width: 33.33%; 22 | height: 33.33%; 23 | float: left; 24 | -webkit-animation: gKRhTX 1.3s infinite ease-in-out 0.4s; 25 | animation: gKRhTX 1.3s infinite ease-in-out 0.4s; 26 | } 27 | 28 | .c5 { 29 | width: 33.33%; 30 | height: 33.33%; 31 | float: left; 32 | -webkit-animation: gKRhTX 1.3s infinite ease-in-out 0.1s; 33 | animation: gKRhTX 1.3s infinite ease-in-out 0.1s; 34 | } 35 | 36 | .c6 { 37 | width: 33.33%; 38 | height: 33.33%; 39 | float: left; 40 | -webkit-animation: gKRhTX 1.3s infinite ease-in-out 0s; 41 | animation: gKRhTX 1.3s infinite ease-in-out 0s; 42 | } 43 | 44 | .c0 { 45 | width: 40px; 46 | height: 40px; 47 | margin: 40px auto; 48 | } 49 | 50 | .c0 > .c1 { 51 | background-color: #333; 52 | } 53 | 54 |
59 |
62 |
65 |
68 |
71 |
74 |
77 |
80 |
83 |
86 |
87 | `; 88 | -------------------------------------------------------------------------------- /src/CubeGrid/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/CubeGrid/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import { roundTo } from '../util' 4 | import { Child, StyledCubeGrid } from './styles' 5 | 6 | const CubeGrid: React.FC = ({ 7 | size = DEFAULT_SIZE, 8 | color = DEFAULT_COLOR, 9 | className, 10 | }) => { 11 | const range = 0.4 12 | const cubes = [0.5, 0.75, 1, 0.25, 0.5, 0.75, 0, 0.25, 0.5] 13 | .map((v) => roundTo(range * v, 2)) 14 | .map((v, k) => ) 15 | 16 | return ( 17 | 18 | {cubes} 19 | 20 | ) 21 | } 22 | 23 | export default CubeGrid 24 | -------------------------------------------------------------------------------- /src/CubeGrid/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | import { 4 | size, 5 | propSize, 6 | propMargin, 7 | propBgColor, 8 | SizeProps, 9 | BgColorProps, 10 | DelayProps, 11 | } from '../util' 12 | 13 | const scale = keyframes` 14 | 0%, 15 | 70%, 16 | 100% { 17 | transform: scale3d(1, 1, 1); 18 | } 19 | 20 | 35% { 21 | transform: scale3d(0, 0, 1); 22 | } 23 | ` 24 | 25 | export const Child = styled.div` 26 | ${size('33.33%')}; 27 | float: left; 28 | animation: ${scale} 1.3s infinite ease-in-out ${(p) => p.delay}s; 29 | ` 30 | 31 | export const StyledCubeGrid = styled.div` 32 | ${propSize}; 33 | ${propMargin}; 34 | > ${Child} { 35 | ${propBgColor}; 36 | } 37 | ` 38 | -------------------------------------------------------------------------------- /src/DoubleBounce/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | width: 100%; 6 | height: 100%; 7 | border-radius: 50%; 8 | position: absolute; 9 | opacity: 0.6; 10 | top: 0; 11 | left: 0; 12 | -webkit-animation: hyvohD 2s infinite ease-in-out; 13 | animation: hyvohD 2s infinite ease-in-out; 14 | } 15 | 16 | .c3 { 17 | width: 100%; 18 | height: 100%; 19 | border-radius: 50%; 20 | position: absolute; 21 | opacity: 0.6; 22 | top: 0; 23 | left: 0; 24 | -webkit-animation: hyvohD 2s infinite ease-in-out; 25 | animation: hyvohD 2s infinite ease-in-out; 26 | -webkit-animation-delay: -1s; 27 | animation-delay: -1s; 28 | } 29 | 30 | .c0 { 31 | width: 40px; 32 | height: 40px; 33 | position: relative; 34 | margin: 40px auto; 35 | } 36 | 37 | .c0 > .c1 { 38 | background-color: #333; 39 | } 40 | 41 |
46 |
49 |
52 |
53 | `; 54 | -------------------------------------------------------------------------------- /src/DoubleBounce/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/DoubleBounce/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import { Child, StyledDoubleBounce } from './styles' 4 | 5 | const DoubleBounce: React.FC = ({ 6 | size = DEFAULT_SIZE, 7 | color = DEFAULT_COLOR, 8 | className, 9 | }) => { 10 | return ( 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default DoubleBounce 19 | -------------------------------------------------------------------------------- /src/DoubleBounce/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | size, 4 | propSize, 5 | propBgColor, 6 | propMargin, 7 | animationDelay, 8 | SizeProps, 9 | BgColorProps, 10 | } from '../util' 11 | 12 | const debounce = keyframes` 13 | 0%, 14 | 100% { 15 | transform: scale(0); 16 | } 17 | 50% { 18 | transform: scale(1); 19 | } 20 | ` 21 | 22 | export const Child = styled.div<{ isDelay?: boolean }>` 23 | ${size('100%')}; 24 | border-radius: 50%; 25 | position: absolute; 26 | opacity: 0.6; 27 | top: 0; 28 | left: 0; 29 | animation: ${debounce} 2s infinite ease-in-out; 30 | ${(p) => p.isDelay && animationDelay(-1)}; 31 | ` 32 | 33 | export const StyledDoubleBounce = styled.div` 34 | ${propSize}; 35 | position: relative; 36 | ${propMargin}; 37 | > ${Child} { 38 | ${propBgColor}; 39 | } 40 | ` 41 | -------------------------------------------------------------------------------- /src/FadingCircle/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | width: 100%; 6 | height: 100%; 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | -webkit-transform: rotate(0deg); 11 | -ms-transform: rotate(0deg); 12 | transform: rotate(0deg); 13 | } 14 | 15 | .c2::before { 16 | content: ''; 17 | display: block; 18 | margin: 0 auto; 19 | width: 15%; 20 | height: 15%; 21 | border-radius: 100%; 22 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -1.2s; 23 | animation: lazEJ 1.2s infinite ease-in-out both -1.2s; 24 | } 25 | 26 | .c3 { 27 | width: 100%; 28 | height: 100%; 29 | position: absolute; 30 | left: 0; 31 | top: 0; 32 | -webkit-transform: rotate(30deg); 33 | -ms-transform: rotate(30deg); 34 | transform: rotate(30deg); 35 | } 36 | 37 | .c3::before { 38 | content: ''; 39 | display: block; 40 | margin: 0 auto; 41 | width: 15%; 42 | height: 15%; 43 | border-radius: 100%; 44 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -1.1s; 45 | animation: lazEJ 1.2s infinite ease-in-out both -1.1s; 46 | } 47 | 48 | .c4 { 49 | width: 100%; 50 | height: 100%; 51 | position: absolute; 52 | left: 0; 53 | top: 0; 54 | -webkit-transform: rotate(60deg); 55 | -ms-transform: rotate(60deg); 56 | transform: rotate(60deg); 57 | } 58 | 59 | .c4::before { 60 | content: ''; 61 | display: block; 62 | margin: 0 auto; 63 | width: 15%; 64 | height: 15%; 65 | border-radius: 100%; 66 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -1s; 67 | animation: lazEJ 1.2s infinite ease-in-out both -1s; 68 | } 69 | 70 | .c5 { 71 | width: 100%; 72 | height: 100%; 73 | position: absolute; 74 | left: 0; 75 | top: 0; 76 | -webkit-transform: rotate(90deg); 77 | -ms-transform: rotate(90deg); 78 | transform: rotate(90deg); 79 | } 80 | 81 | .c5::before { 82 | content: ''; 83 | display: block; 84 | margin: 0 auto; 85 | width: 15%; 86 | height: 15%; 87 | border-radius: 100%; 88 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.9s; 89 | animation: lazEJ 1.2s infinite ease-in-out both -0.9s; 90 | } 91 | 92 | .c6 { 93 | width: 100%; 94 | height: 100%; 95 | position: absolute; 96 | left: 0; 97 | top: 0; 98 | -webkit-transform: rotate(120deg); 99 | -ms-transform: rotate(120deg); 100 | transform: rotate(120deg); 101 | } 102 | 103 | .c6::before { 104 | content: ''; 105 | display: block; 106 | margin: 0 auto; 107 | width: 15%; 108 | height: 15%; 109 | border-radius: 100%; 110 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.8s; 111 | animation: lazEJ 1.2s infinite ease-in-out both -0.8s; 112 | } 113 | 114 | .c7 { 115 | width: 100%; 116 | height: 100%; 117 | position: absolute; 118 | left: 0; 119 | top: 0; 120 | -webkit-transform: rotate(150deg); 121 | -ms-transform: rotate(150deg); 122 | transform: rotate(150deg); 123 | } 124 | 125 | .c7::before { 126 | content: ''; 127 | display: block; 128 | margin: 0 auto; 129 | width: 15%; 130 | height: 15%; 131 | border-radius: 100%; 132 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.7s; 133 | animation: lazEJ 1.2s infinite ease-in-out both -0.7s; 134 | } 135 | 136 | .c8 { 137 | width: 100%; 138 | height: 100%; 139 | position: absolute; 140 | left: 0; 141 | top: 0; 142 | -webkit-transform: rotate(180deg); 143 | -ms-transform: rotate(180deg); 144 | transform: rotate(180deg); 145 | } 146 | 147 | .c8::before { 148 | content: ''; 149 | display: block; 150 | margin: 0 auto; 151 | width: 15%; 152 | height: 15%; 153 | border-radius: 100%; 154 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.6s; 155 | animation: lazEJ 1.2s infinite ease-in-out both -0.6s; 156 | } 157 | 158 | .c9 { 159 | width: 100%; 160 | height: 100%; 161 | position: absolute; 162 | left: 0; 163 | top: 0; 164 | -webkit-transform: rotate(210deg); 165 | -ms-transform: rotate(210deg); 166 | transform: rotate(210deg); 167 | } 168 | 169 | .c9::before { 170 | content: ''; 171 | display: block; 172 | margin: 0 auto; 173 | width: 15%; 174 | height: 15%; 175 | border-radius: 100%; 176 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.5s; 177 | animation: lazEJ 1.2s infinite ease-in-out both -0.5s; 178 | } 179 | 180 | .c10 { 181 | width: 100%; 182 | height: 100%; 183 | position: absolute; 184 | left: 0; 185 | top: 0; 186 | -webkit-transform: rotate(240deg); 187 | -ms-transform: rotate(240deg); 188 | transform: rotate(240deg); 189 | } 190 | 191 | .c10::before { 192 | content: ''; 193 | display: block; 194 | margin: 0 auto; 195 | width: 15%; 196 | height: 15%; 197 | border-radius: 100%; 198 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.4s; 199 | animation: lazEJ 1.2s infinite ease-in-out both -0.4s; 200 | } 201 | 202 | .c11 { 203 | width: 100%; 204 | height: 100%; 205 | position: absolute; 206 | left: 0; 207 | top: 0; 208 | -webkit-transform: rotate(270deg); 209 | -ms-transform: rotate(270deg); 210 | transform: rotate(270deg); 211 | } 212 | 213 | .c11::before { 214 | content: ''; 215 | display: block; 216 | margin: 0 auto; 217 | width: 15%; 218 | height: 15%; 219 | border-radius: 100%; 220 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.3s; 221 | animation: lazEJ 1.2s infinite ease-in-out both -0.3s; 222 | } 223 | 224 | .c12 { 225 | width: 100%; 226 | height: 100%; 227 | position: absolute; 228 | left: 0; 229 | top: 0; 230 | -webkit-transform: rotate(300deg); 231 | -ms-transform: rotate(300deg); 232 | transform: rotate(300deg); 233 | } 234 | 235 | .c12::before { 236 | content: ''; 237 | display: block; 238 | margin: 0 auto; 239 | width: 15%; 240 | height: 15%; 241 | border-radius: 100%; 242 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.2s; 243 | animation: lazEJ 1.2s infinite ease-in-out both -0.2s; 244 | } 245 | 246 | .c13 { 247 | width: 100%; 248 | height: 100%; 249 | position: absolute; 250 | left: 0; 251 | top: 0; 252 | -webkit-transform: rotate(330deg); 253 | -ms-transform: rotate(330deg); 254 | transform: rotate(330deg); 255 | } 256 | 257 | .c13::before { 258 | content: ''; 259 | display: block; 260 | margin: 0 auto; 261 | width: 15%; 262 | height: 15%; 263 | border-radius: 100%; 264 | -webkit-animation: lazEJ 1.2s infinite ease-in-out both -0.1s; 265 | animation: lazEJ 1.2s infinite ease-in-out both -0.1s; 266 | } 267 | 268 | .c0 { 269 | width: 40px; 270 | height: 40px; 271 | margin: 40px auto; 272 | position: relative; 273 | } 274 | 275 | .c0 > .c1::before { 276 | background-color: #333; 277 | } 278 | 279 |
284 |
288 |
292 |
296 |
300 |
304 |
308 |
312 |
316 |
320 |
324 |
328 |
332 |
333 | `; 334 | -------------------------------------------------------------------------------- /src/FadingCircle/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/FadingCircle/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { getRange, roundTo } from '../util' 3 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 4 | import { Child, StyledForldingCircle } from './styles' 5 | 6 | const ForldingCircle: React.FC = ({ 7 | size = DEFAULT_SIZE, 8 | color = DEFAULT_COLOR, 9 | className, 10 | }) => { 11 | const count = 12 12 | const range = 1.2 13 | const circles = getRange(count).map((v) => ( 14 | 19 | )) 20 | 21 | return ( 22 | 23 | {circles} 24 | 25 | ) 26 | } 27 | 28 | export default ForldingCircle 29 | -------------------------------------------------------------------------------- /src/FadingCircle/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | propSize, 4 | size, 5 | propMargin, 6 | propBgColor, 7 | SizeProps, 8 | BgColorProps, 9 | DelayProps, 10 | } from '../util' 11 | 12 | const opacity = keyframes` 13 | 0%, 14 | 39%, 15 | 100% { 16 | opacity: 0; 17 | } 18 | 19 | 40% { 20 | opacity: 1; 21 | } 22 | ` 23 | 24 | export const Child = styled.div<{ rotate: number } & DelayProps>` 25 | ${size('100%')}; 26 | position: absolute; 27 | left: 0; 28 | top: 0; 29 | transform: rotate(${(p) => p.rotate}deg); 30 | &::before { 31 | content: ''; 32 | display: block; 33 | margin: 0 auto; 34 | ${size('15%')}; 35 | border-radius: 100%; 36 | animation: ${opacity} 1.2s infinite ease-in-out both -${(p) => p.delay}s; 37 | } 38 | ` 39 | 40 | export const StyledForldingCircle = styled.div` 41 | ${propSize}; 42 | ${propMargin}; 43 | position: relative; 44 | 45 | > ${Child} { 46 | &::before { 47 | ${propBgColor}; 48 | } 49 | } 50 | ` 51 | -------------------------------------------------------------------------------- /src/FoldingCube/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | float: left; 6 | width: 50%; 7 | height: 50%; 8 | position: relative; 9 | -webkit-transform: scale(1.1) rotateZ(0deg); 10 | -ms-transform: scale(1.1) rotateZ(0deg); 11 | transform: scale(1.1) rotateZ(0deg); 12 | } 13 | 14 | .c2::before { 15 | content: ''; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | -webkit-animation: cfKLBH 2.4s infinite linear both 0s; 22 | animation: cfKLBH 2.4s infinite linear both 0s; 23 | -webkit-transform-origin: 100% 100%; 24 | -ms-transform-origin: 100% 100%; 25 | transform-origin: 100% 100%; 26 | } 27 | 28 | .c3 { 29 | float: left; 30 | width: 50%; 31 | height: 50%; 32 | position: relative; 33 | -webkit-transform: scale(1.1) rotateZ(90deg); 34 | -ms-transform: scale(1.1) rotateZ(90deg); 35 | transform: scale(1.1) rotateZ(90deg); 36 | } 37 | 38 | .c3::before { 39 | content: ''; 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | width: 100%; 44 | height: 100%; 45 | -webkit-animation: cfKLBH 2.4s infinite linear both 0.3s; 46 | animation: cfKLBH 2.4s infinite linear both 0.3s; 47 | -webkit-transform-origin: 100% 100%; 48 | -ms-transform-origin: 100% 100%; 49 | transform-origin: 100% 100%; 50 | } 51 | 52 | .c4 { 53 | float: left; 54 | width: 50%; 55 | height: 50%; 56 | position: relative; 57 | -webkit-transform: scale(1.1) rotateZ(270deg); 58 | -ms-transform: scale(1.1) rotateZ(270deg); 59 | transform: scale(1.1) rotateZ(270deg); 60 | } 61 | 62 | .c4::before { 63 | content: ''; 64 | position: absolute; 65 | top: 0; 66 | left: 0; 67 | width: 100%; 68 | height: 100%; 69 | -webkit-animation: cfKLBH 2.4s infinite linear both 0.9s; 70 | animation: cfKLBH 2.4s infinite linear both 0.9s; 71 | -webkit-transform-origin: 100% 100%; 72 | -ms-transform-origin: 100% 100%; 73 | transform-origin: 100% 100%; 74 | } 75 | 76 | .c5 { 77 | float: left; 78 | width: 50%; 79 | height: 50%; 80 | position: relative; 81 | -webkit-transform: scale(1.1) rotateZ(180deg); 82 | -ms-transform: scale(1.1) rotateZ(180deg); 83 | transform: scale(1.1) rotateZ(180deg); 84 | } 85 | 86 | .c5::before { 87 | content: ''; 88 | position: absolute; 89 | top: 0; 90 | left: 0; 91 | width: 100%; 92 | height: 100%; 93 | -webkit-animation: cfKLBH 2.4s infinite linear both 0.6s; 94 | animation: cfKLBH 2.4s infinite linear both 0.6s; 95 | -webkit-transform-origin: 100% 100%; 96 | -ms-transform-origin: 100% 100%; 97 | transform-origin: 100% 100%; 98 | } 99 | 100 | .c0 { 101 | width: 40px; 102 | height: 40px; 103 | margin: 40px auto; 104 | position: relative; 105 | -webkit-transform: rotateZ(45deg); 106 | -ms-transform: rotateZ(45deg); 107 | transform: rotateZ(45deg); 108 | } 109 | 110 | .c0 > .c1::before { 111 | background-color: #333; 112 | } 113 | 114 |
119 |
123 |
127 |
131 |
135 |
136 | `; 137 | -------------------------------------------------------------------------------- /src/FoldingCube/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/FoldingCube/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import { roundTo } from '../util' 4 | import { Child, StyledFoldingCube } from './styles' 5 | 6 | const FoldingCube: React.FC = ({ 7 | size = DEFAULT_SIZE, 8 | color = DEFAULT_COLOR, 9 | className, 10 | }) => { 11 | const duration = 2.4 12 | const range = duration / 2 13 | const cubeCount = 4 14 | 15 | const cubes = [0, 1, 3, 2].map((v) => ( 16 | 22 | )) 23 | 24 | return ( 25 | 26 | {cubes} 27 | 28 | ) 29 | } 30 | 31 | export default FoldingCube 32 | -------------------------------------------------------------------------------- /src/FoldingCube/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | propSize, 4 | size, 5 | propBgColor, 6 | propMargin, 7 | SizeProps, 8 | BgColorProps, 9 | DelayProps, 10 | } from '../util' 11 | 12 | const locate = keyframes` 13 | 0%, 14 | 10% { 15 | transform: perspective(140px) rotateX(-180deg); 16 | opacity: 0; 17 | } 18 | 25%, 19 | 75% { 20 | transform: perspective(140px) rotateX(0deg); 21 | opacity: 1; 22 | } 23 | 90%, 24 | 100% { 25 | transform: perspective(140px) rotateY(180deg); 26 | opacity: 0; 27 | } 28 | ` 29 | 30 | export const Child = styled.div< 31 | { 32 | scale: number 33 | duration: number 34 | } & DelayProps 35 | >` 36 | float: left; 37 | ${size('50%')}; 38 | position: relative; 39 | transform: scale(1.1) rotateZ(${(p) => p.scale}deg); 40 | &::before { 41 | content: ''; 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | ${size('100%')}; 46 | animation: ${locate} ${(p) => p.duration}s infinite linear both 47 | ${(p) => p.delay}s; 48 | transform-origin: 100% 100%; 49 | } 50 | ` 51 | 52 | export const StyledFoldingCube = styled.div` 53 | ${propSize}; 54 | ${propMargin}; 55 | position: relative; 56 | transform: rotateZ(45deg); 57 | 58 | > ${Child} { 59 | &::before { 60 | ${propBgColor}; 61 | } 62 | } 63 | ` 64 | -------------------------------------------------------------------------------- /src/Pulse/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c0 { 5 | width: 40px; 6 | height: 40px; 7 | background-color: #333; 8 | margin: 40px auto; 9 | border-radius: 100%; 10 | -webkit-animation: cNFIFb 1s ease-in-out infinite; 11 | animation: cNFIFb 1s ease-in-out infinite; 12 | } 13 | 14 |
19 | `; 20 | -------------------------------------------------------------------------------- /src/Pulse/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/Pulse/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import StyledPulse from './styles' 4 | 5 | const Pulse: React.FC = ({ 6 | size = DEFAULT_SIZE, 7 | color = DEFAULT_COLOR, 8 | className, 9 | }) => { 10 | return 11 | } 12 | 13 | export default Pulse 14 | -------------------------------------------------------------------------------- /src/Pulse/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | propSize, 4 | propBgColor, 5 | propMargin, 6 | SizeProps, 7 | BgColorProps, 8 | } from '../util' 9 | 10 | const scaleOut = keyframes` 11 | 0% { 12 | transform: scale(0); 13 | } 14 | 100% { 15 | opacity: 0; 16 | transform: scale(1); 17 | } 18 | ` 19 | 20 | type Props = SizeProps & BgColorProps 21 | 22 | const StyledPulse = styled.div` 23 | ${propSize}; 24 | ${propBgColor}; 25 | ${propMargin}; 26 | border-radius: 100%; 27 | animation: ${scaleOut} 1s ease-in-out infinite; 28 | ` 29 | 30 | export default StyledPulse 31 | -------------------------------------------------------------------------------- /src/RotaingPlane/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c0 { 5 | width: 40px; 6 | height: 40px; 7 | background-color: #333; 8 | margin: 40px auto; 9 | -webkit-animation: iyNvKY 1.2s infinite ease-in-out; 10 | animation: iyNvKY 1.2s infinite ease-in-out; 11 | } 12 | 13 |
19 | `; 20 | -------------------------------------------------------------------------------- /src/RotaingPlane/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/RotaingPlane/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import StyledRotaingPlain from './styles' 4 | 5 | const speed = 1.2 6 | 7 | const RotaingPlain: React.FC = ({ 8 | size = DEFAULT_SIZE, 9 | color = DEFAULT_COLOR, 10 | className, 11 | }) => { 12 | return ( 13 | 19 | ) 20 | } 21 | 22 | export default RotaingPlain 23 | -------------------------------------------------------------------------------- /src/RotaingPlane/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | propSize, 4 | propBgColor, 5 | propMargin, 6 | SizeProps, 7 | BgColorProps, 8 | } from '../util' 9 | 10 | const spin = keyframes` 11 | 0% { 12 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 13 | } 14 | 50% { 15 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 16 | } 17 | 100% { 18 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 19 | } 20 | ` 21 | 22 | type Props = { 23 | speed: number 24 | } 25 | 26 | const StyledRotaingPlain = styled.div` 27 | ${propSize}; 28 | ${propBgColor}; 29 | ${propMargin}; 30 | animation: ${spin} ${(p) => p.speed}s infinite ease-in-out; 31 | ` 32 | 33 | export default StyledRotaingPlain 34 | -------------------------------------------------------------------------------- /src/ThreeBounce/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | border-radius: 100%; 6 | display: inline-block; 7 | -webkit-animation: fQdAWJ 1.4s ease-in-out -0.32s infinite both; 8 | animation: fQdAWJ 1.4s ease-in-out -0.32s infinite both; 9 | } 10 | 11 | .c3 { 12 | border-radius: 100%; 13 | display: inline-block; 14 | -webkit-animation: fQdAWJ 1.4s ease-in-out -0.16s infinite both; 15 | animation: fQdAWJ 1.4s ease-in-out -0.16s infinite both; 16 | } 17 | 18 | .c4 { 19 | border-radius: 100%; 20 | display: inline-block; 21 | -webkit-animation: fQdAWJ 1.4s ease-in-out 0s infinite both; 22 | animation: fQdAWJ 1.4s ease-in-out 0s infinite both; 23 | } 24 | 25 | .c0 { 26 | width: 40px; 27 | margin: 40px auto; 28 | text-align: center; 29 | border-radius: 100%; 30 | } 31 | 32 | .c0 > .c1 { 33 | width: 10px; 34 | height: 10px; 35 | background-color: #333; 36 | } 37 | 38 |
43 |
46 |
49 |
52 |
53 | `; 54 | -------------------------------------------------------------------------------- /src/ThreeBounce/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/ThreeBounce/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import { Child, StyledThreeBounce } from './styles' 4 | 5 | const ThreeBounce: React.FC = ({ 6 | size = DEFAULT_SIZE, 7 | color = DEFAULT_COLOR, 8 | className, 9 | }) => { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export default ThreeBounce 20 | -------------------------------------------------------------------------------- /src/ThreeBounce/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | sizePx, 4 | propMargin, 5 | propBgColor, 6 | SizeProps, 7 | BgColorProps, 8 | DelayProps, 9 | } from '../util' 10 | 11 | const bounce = keyframes` 12 | 0%, 13 | 80%, 14 | 100% { 15 | transform: scale(0); 16 | } 17 | 40% { 18 | transform: scale(1); 19 | } 20 | ` 21 | 22 | export const Child = styled.div` 23 | border-radius: 100%; 24 | display: inline-block; 25 | animation: ${bounce} 1.4s ease-in-out ${(p) => p.delay}s infinite both; 26 | ` 27 | 28 | export const StyledThreeBounce = styled.div` 29 | width: ${(p) => p.size}px; 30 | ${propMargin}; 31 | text-align: center; 32 | border-radius: 100%; 33 | > ${Child} { 34 | ${(p) => sizePx(p.size / 4)}; 35 | ${propBgColor}; 36 | } 37 | ` 38 | -------------------------------------------------------------------------------- /src/WanderingCubes/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | width: 10px; 6 | height: 10px; 7 | -webkit-animation-delay: 1.8s; 8 | animation-delay: 1.8s; 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | -webkit-animation-timing-function: ease-in-out; 13 | animation-timing-function: ease-in-out; 14 | -webkit-animation-iteration-count: infinite; 15 | animation-iteration-count: infinite; 16 | -webkit-animation-fill-mode: both; 17 | animation-fill-mode: both; 18 | } 19 | 20 | .c3 { 21 | width: 10px; 22 | height: 10px; 23 | -webkit-animation-delay: 0.9s; 24 | animation-delay: 0.9s; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | -webkit-animation-timing-function: ease-in-out; 29 | animation-timing-function: ease-in-out; 30 | -webkit-animation-iteration-count: infinite; 31 | animation-iteration-count: infinite; 32 | -webkit-animation-fill-mode: both; 33 | animation-fill-mode: both; 34 | } 35 | 36 | .c0 { 37 | margin: 32px auto; 38 | width: 40px; 39 | height: 40px; 40 | text-align: center; 41 | font-size: 10px; 42 | position: relative; 43 | } 44 | 45 | .c0 > .c1 { 46 | background-color: #333; 47 | -webkit-animation-name: ksymO; 48 | animation-name: ksymO; 49 | -webkit-animation-duration: 1.8s; 50 | animation-duration: 1.8s; 51 | } 52 | 53 |
59 |
63 |
67 |
68 | `; 69 | -------------------------------------------------------------------------------- /src/WanderingCubes/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/WanderingCubes/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 3 | import { roundTo } from '../util' 4 | import { Child, StyledWanderingCubes } from './styles' 5 | 6 | const WanderingCubes: React.FC = ({ 7 | size = DEFAULT_SIZE, 8 | color = DEFAULT_COLOR, 9 | className, 10 | }) => { 11 | const speed = 1.8 12 | const cubeSize = roundTo(size / 4, 2) 13 | 14 | return ( 15 | 21 | 22 | 23 | 24 | ) 25 | } 26 | 27 | export default WanderingCubes 28 | -------------------------------------------------------------------------------- /src/WanderingCubes/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { 3 | propSize, 4 | propBgColor, 5 | propDelay, 6 | SizeProps, 7 | DelayProps, 8 | BgColorProps, 9 | roundTo, 10 | } from '../util' 11 | 12 | const createAnim = (cubeDistance = 42) => keyframes` 13 | 0% { 14 | transform: rotate(0deg); 15 | } 16 | 25% { 17 | transform: translateX(${cubeDistance}px) rotate(-90deg) scale(0.5); 18 | } 19 | 50% { 20 | /* Hack to make FF rotate in the right direction */ 21 | transform: translateX(${cubeDistance}px) translateY(${cubeDistance}px) rotate(-179deg); 22 | } 23 | 50.1% { 24 | transform: translateX(${cubeDistance}px) translateY(${cubeDistance}px) rotate(-180deg); 25 | } 26 | 75% { 27 | transform: translateX(0) translateY(${cubeDistance}px) rotate(-270deg) scale(0.5); 28 | } 29 | 100% { 30 | transform: rotate(-360deg); 31 | } 32 | ` 33 | 34 | export const Child = styled.div` 35 | ${propSize}; 36 | ${propDelay}; 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | animation-timing-function: ease-in-out; 41 | animation-iteration-count: infinite; 42 | animation-fill-mode: both; 43 | ` 44 | 45 | export const StyledWanderingCubes = styled.div< 46 | { speed: number } & SizeProps & BgColorProps 47 | >` 48 | margin: ${(p) => roundTo(p.size * 0.8, 1)}px auto; 49 | ${propSize}; 50 | text-align: center; 51 | font-size: 10px; 52 | position: relative; 53 | 54 | > ${Child} { 55 | ${propBgColor}; 56 | animation-name: ${(p) => createAnim(roundTo(p.size * 0.8, 1))}; 57 | animation-duration: ${(p) => p.speed}s; 58 | } 59 | ` 60 | -------------------------------------------------------------------------------- /src/WaveLoading/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render without props 1`] = ` 4 | .c2 { 5 | width: 7px; 6 | height: 100%; 7 | margin: 0 3px 0 0; 8 | display: inline-block; 9 | -webkit-animation-delay: -1.2s; 10 | animation-delay: -1.2s; 11 | } 12 | 13 | .c3 { 14 | width: 7px; 15 | height: 100%; 16 | margin: 0 3px 0 0; 17 | display: inline-block; 18 | -webkit-animation-delay: -1.1s; 19 | animation-delay: -1.1s; 20 | } 21 | 22 | .c4 { 23 | width: 7px; 24 | height: 100%; 25 | margin: 0 3px 0 0; 26 | display: inline-block; 27 | -webkit-animation-delay: -1s; 28 | animation-delay: -1s; 29 | } 30 | 31 | .c5 { 32 | width: 7px; 33 | height: 100%; 34 | margin: 0 3px 0 0; 35 | display: inline-block; 36 | -webkit-animation-delay: -0.9s; 37 | animation-delay: -0.9s; 38 | } 39 | 40 | .c6 { 41 | width: 7px; 42 | height: 100%; 43 | margin: 0 3px 0 0; 44 | display: inline-block; 45 | -webkit-animation-delay: -0.8s; 46 | animation-delay: -0.8s; 47 | } 48 | 49 | .c0 { 50 | margin: 40px auto; 51 | width: 50px; 52 | height: 40px; 53 | text-align: center; 54 | font-size: 10px; 55 | } 56 | 57 | .c0 > .c1 { 58 | background-color: #333; 59 | -webkit-animation-name: dMPjAB; 60 | animation-name: dMPjAB; 61 | -webkit-animation-duration: 1.2s; 62 | animation-duration: 1.2s; 63 | -webkit-animation-timing-function: ease-in-out; 64 | animation-timing-function: ease-in-out; 65 | -webkit-animation-iteration-count: infinite; 66 | animation-iteration-count: infinite; 67 | } 68 | 69 |
75 |
78 |
81 |
84 |
87 |
90 |
91 | `; 92 | -------------------------------------------------------------------------------- /src/WaveLoading/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import renderer from 'react-test-renderer' 3 | import Comp from '.' 4 | 5 | test('render without props', () => { 6 | const tree = renderer.create().toJSON() 7 | expect(tree).toMatchSnapshot() 8 | }) 9 | -------------------------------------------------------------------------------- /src/WaveLoading/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { getRange, roundTo } from '../util' 3 | import { SpinkitProps, DEFAULT_SIZE, DEFAULT_COLOR } from '../types' 4 | import { Rect, StyledWave } from './styles' 5 | 6 | const speed = 1.2 7 | const rectCount = 5 8 | const delayRange = 0.4 9 | 10 | const Wave: React.FC = ({ 11 | size = DEFAULT_SIZE, 12 | color = DEFAULT_COLOR, 13 | className, 14 | }) => { 15 | const rects = getRange(rectCount).map((v) => ( 16 | 20 | )) 21 | 22 | return ( 23 | 24 | {rects} 25 | 26 | ) 27 | } 28 | 29 | export default Wave 30 | -------------------------------------------------------------------------------- /src/WaveLoading/styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | import { size, propMargin, propBgColor, propDelay } from '../util' 3 | 4 | const anim = keyframes` 5 | 0%, 6 | 40%, 7 | 100% { 8 | transform: scaleY(0.4); 9 | } 10 | 20% { 11 | transform: scaleY(1); 12 | } 13 | ` 14 | 15 | type StyledWaveProps = { 16 | size: number 17 | speed: number 18 | color: string 19 | } 20 | 21 | export const Rect = styled.div<{ delay: number }>` 22 | ${size('7px', '100%')}; 23 | margin: 0 3px 0 0; 24 | display: inline-block; 25 | ${propDelay}; 26 | ` 27 | 28 | export const StyledWave = styled.div` 29 | ${propMargin}; 30 | ${(p) => size(`${p.size * 1.25}px`, `${p.size}px`)}; 31 | text-align: center; 32 | font-size: 10px; 33 | 34 | > ${Rect} { 35 | ${propBgColor}; 36 | animation-name: ${anim}; 37 | animation-duration: ${(p) => p.speed}s; 38 | animation-timing-function: ease-in-out; 39 | animation-iteration-count: infinite; 40 | } 41 | ` 42 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import ChasingDots from './ChasingDots' 2 | import FadingCircle from './FadingCircle' 3 | import ThreeBounce from './ThreeBounce' 4 | import Circle from './Circle' 5 | import FoldingCube from './FoldingCube' 6 | import WanderingCubes from './WanderingCubes' 7 | import CubeGrid from './CubeGrid' 8 | import Pulse from './Pulse' 9 | import WaveLoading from './WaveLoading' 10 | import DoubleBounce from './DoubleBounce' 11 | import RotaingPlane from './RotaingPlane' 12 | 13 | export { 14 | ChasingDots, 15 | Circle, 16 | CubeGrid, 17 | Pulse, 18 | FadingCircle, 19 | ThreeBounce, 20 | FoldingCube, 21 | WanderingCubes, 22 | WaveLoading, 23 | DoubleBounce, 24 | RotaingPlane, 25 | } 26 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type SpinkitProps = { 2 | /** 3 | * @default 40 4 | */ 5 | size?: number 6 | /** 7 | * @default '#333' 8 | */ 9 | color?: string 10 | className?: string 11 | } 12 | 13 | export const DEFAULT_SIZE = 40 14 | 15 | export const DEFAULT_COLOR = '#333' 16 | -------------------------------------------------------------------------------- /src/util/index.test.tsx: -------------------------------------------------------------------------------- 1 | import { roundTo } from '../util' 2 | 3 | test('roundTo util function ', () => { 4 | expect(roundTo(4, 1)).toStrictEqual(4) 5 | expect(roundTo(1.1337, 3)).toStrictEqual(1.134) 6 | }) 7 | -------------------------------------------------------------------------------- /src/util/index.tsx: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components' 2 | 3 | // This is an improvement of Math.round. 4 | // It gives you the ability to round after a decimal. 5 | export const roundTo = (n: number, precision: number): number => 6 | Math.round(n * 10 ** precision) / 10 ** precision 7 | 8 | export const size = (width: string, height: string = width) => css` 9 | width: ${width}; 10 | height: ${height}; 11 | ` 12 | 13 | export const sizePx = (n: number) => size(`${n}px`) 14 | 15 | export type SizeProps = { 16 | size: number 17 | } 18 | 19 | // eslint-disable-next-line no-shadow 20 | export const propSize = ({ size }: SizeProps) => sizePx(size) 21 | 22 | export type BgColorProps = { 23 | color: string 24 | } 25 | 26 | export const propBgColor = ({ color }: BgColorProps) => css` 27 | background-color: ${color}; 28 | ` 29 | 30 | export type MarginProps = { 31 | size?: number 32 | } 33 | 34 | // eslint-disable-next-line no-shadow 35 | export const propMargin = ({ size = 0 }: MarginProps) => css` 36 | margin: ${size}px auto; 37 | ` 38 | 39 | export const animationDelay = (n: number) => 40 | css` 41 | animation-delay: ${n}s; 42 | ` 43 | 44 | export type DelayProps = { 45 | delay: number 46 | } 47 | 48 | export const propDelay = ({ delay }: DelayProps) => animationDelay(delay) 49 | 50 | export const getRange = (n: number): number[] => 51 | Array.from(new Array(n).keys()) 52 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@akameco/tsconfig", 3 | "compilerOptions": { 4 | "outDir": "compiled", 5 | "module": "esnext", 6 | "declaration": true, 7 | "declarationDir": "dist", 8 | "lib": ["dom", "esnext"], 9 | "skipLibCheck": true 10 | }, 11 | "include": ["src"], 12 | "exclude": ["node_modules", "dist"] 13 | } 14 | --------------------------------------------------------------------------------