├── .babelrc ├── .gitignore ├── images ├── react-page-loading.png └── react-page-loading-features.gif ├── example ├── pages │ ├── index.js │ ├── bar.js │ ├── bubble.js │ ├── spin.js │ ├── bubble-spin.js │ ├── comet-spin.js │ ├── resize-spin.js │ ├── rotate-spin.js │ └── cylinder-spin.js ├── README.md ├── package.json └── components │ ├── Layout.js │ └── Header.js ├── src ├── bar │ ├── BarLoader.js │ └── Bar.js ├── bubble │ ├── BubbleLoader.js │ └── Bubble.js ├── comet-spin │ ├── CometSpinLoader.js │ └── CometSpin.js ├── bubble-spin │ ├── BubbleSpinLoader.js │ └── BubbleSpin.js ├── rotate-spin │ ├── RotateSpinLoader.js │ └── RotateSpin.js ├── spin │ ├── SpinLoader.js │ └── Spin.js ├── cylinder-spin │ ├── CylinderSpinLoader.js │ └── CylinderSpin.js ├── resize-spin │ ├── ResizeSpinLoader.js │ └── ResizeSpin.js └── index.js ├── webpack.config.prod.js ├── LICENSE ├── package.json └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | note.txt 3 | example/node_modules -------------------------------------------------------------------------------- /images/react-page-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelte-barcode/react-page-loading/HEAD/images/react-page-loading.png -------------------------------------------------------------------------------- /images/react-page-loading-features.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svelte-barcode/react-page-loading/HEAD/images/react-page-loading-features.gif -------------------------------------------------------------------------------- /example/pages/index.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

Hello Next.js

6 | 7 | ) 8 | -------------------------------------------------------------------------------- /example/pages/bar.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the bar page

6 | 7 | ) -------------------------------------------------------------------------------- /example/pages/bubble.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the bubble page

6 | 7 | ) -------------------------------------------------------------------------------- /example/pages/spin.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the spin page

6 | 7 | ) -------------------------------------------------------------------------------- /example/pages/bubble-spin.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the bubble-spin page

6 | 7 | ) -------------------------------------------------------------------------------- /example/pages/comet-spin.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the comet-spin page

6 | 7 | ) -------------------------------------------------------------------------------- /example/pages/resize-spin.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the resize-spin page

6 | 7 | ) -------------------------------------------------------------------------------- /example/pages/rotate-spin.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the rotate-spin page

6 | 7 | ) -------------------------------------------------------------------------------- /example/pages/cylinder-spin.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/Layout.js' 2 | 3 | export default () => ( 4 | 5 |

This is the cylinder-spin page

6 | 7 | ) -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Setup 2 | 3 | Run the following command to install dependencies: 4 | 5 | ``` 6 | npm install 7 | ``` 8 | 9 | Run the following command to start the dev server: 10 | 11 | ``` 12 | npm run dev 13 | ``` 14 | 15 | Then open http://localhost:3000 from your favourite browser. -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-page-loading-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "next" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "next": "^5.1.0", 14 | "react": "^16.3.2", 15 | "react-dom": "^16.3.2", 16 | "react-page-loading": "^1.0.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/bar/BarLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Bar from './Bar' 4 | 5 | const BarLoader = props => ( 6 | 7 | ) 8 | 9 | BarLoader.propTypes = { 10 | color: PropTypes.string, 11 | duration: PropTypes.number, 12 | size: PropTypes.number, 13 | } 14 | 15 | BarLoader.defaultProps = { 16 | color: '#bebebe', 17 | duration: 1, 18 | size: 4, 19 | } 20 | 21 | export default BarLoader -------------------------------------------------------------------------------- /src/bubble/BubbleLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Bubble from './Bubble' 4 | 5 | const BubbleLoader = props => ( 6 | 7 | ) 8 | 9 | BubbleLoader.propTypes = { 10 | color: PropTypes.string, 11 | duration: PropTypes.number, 12 | size: PropTypes.number, 13 | } 14 | 15 | BubbleLoader.defaultProps = { 16 | color: '#bebebe', 17 | duration: 1.8, 18 | size: 5, 19 | } 20 | 21 | export default BubbleLoader -------------------------------------------------------------------------------- /src/comet-spin/CometSpinLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import CometSpin from './CometSpin' 4 | 5 | const CometSpinLoader = props => ( 6 | 7 | ) 8 | 9 | CometSpinLoader.propTypes = { 10 | color: PropTypes.string, 11 | duration: PropTypes.number, 12 | size: PropTypes.number, 13 | } 14 | 15 | CometSpinLoader.defaultProps = { 16 | color: '#bebebe', 17 | duration: 1.7, 18 | size: 30, 19 | } 20 | 21 | export default CometSpinLoader -------------------------------------------------------------------------------- /src/bubble-spin/BubbleSpinLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import BubbleSpin from './BubbleSpin' 4 | 5 | const BubbleSpinLoader = props => ( 6 | 7 | ) 8 | 9 | BubbleSpinLoader.propTypes = { 10 | color: PropTypes.string, 11 | duration: PropTypes.number, 12 | size: PropTypes.number, 13 | } 14 | 15 | BubbleSpinLoader.defaultProps = { 16 | color: '#bebebe', 17 | duration: 1.3, 18 | size: 8, 19 | } 20 | 21 | export default BubbleSpinLoader -------------------------------------------------------------------------------- /src/rotate-spin/RotateSpinLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import RotateSpin from './RotateSpin' 4 | 5 | const RotateSpinLoader = props => ( 6 | 7 | ) 8 | 9 | RotateSpinLoader.propTypes = { 10 | color: PropTypes.string, 11 | duration: PropTypes.number, 12 | size: PropTypes.number, 13 | } 14 | 15 | RotateSpinLoader.defaultProps = { 16 | color: '#bebebe', 17 | duration: 1.1, 18 | size: 4, 19 | } 20 | 21 | export default RotateSpinLoader -------------------------------------------------------------------------------- /src/spin/SpinLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Spin from './Spin' 4 | 5 | const SpinLoader = props => ( 6 | 7 | ) 8 | 9 | SpinLoader.propTypes = { 10 | background: PropTypes.string, 11 | color: PropTypes.string, 12 | duration: PropTypes.number, 13 | size: PropTypes.number, 14 | } 15 | 16 | SpinLoader.defaultProps = { 17 | background: '#fff', 18 | color: '#bebebe', 19 | duration: 1.4, 20 | size: 4, 21 | } 22 | 23 | export default SpinLoader -------------------------------------------------------------------------------- /example/components/Layout.js: -------------------------------------------------------------------------------- 1 | import Header from './Header' 2 | import Page from 'react-page-loading' 3 | 4 | const layoutStyle = { 5 | margin: 20, 6 | padding: 20, 7 | } 8 | 9 | const contentStyle = { 10 | color: '#808080' 11 | } 12 | 13 | const Layout = (props) => ( 14 |
15 |
16 | 17 |

18 | {props.children} 19 |

20 | 21 |
22 | ) 23 | 24 | export default Layout -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: path.resolve(__dirname, 'src/index'), 5 | output: { 6 | path: path.resolve(__dirname, 'dist'), 7 | library: 'reactLoaders', 8 | libraryTarget: 'umd', 9 | }, 10 | resolve: { 11 | extensions: ['.js', '.jsx'], 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.jsx?$/, 17 | exclude: /(node_modules|bower_components)/, 18 | use: ['babel-loader'], 19 | }, 20 | ], 21 | }, 22 | }; -------------------------------------------------------------------------------- /src/cylinder-spin/CylinderSpinLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import CylinderSpin from './CylinderSpin' 4 | 5 | const CylinderSpinLoader = props => ( 6 | 7 | ) 8 | 9 | CylinderSpinLoader.propTypes = { 10 | color: PropTypes.string, 11 | duration: PropTypes.number, 12 | size: PropTypes.number, 13 | } 14 | 15 | CylinderSpinLoader.defaultProps = { 16 | color: '#bebebe', 17 | duration: 1.1, 18 | size: 8, 19 | } 20 | 21 | export default CylinderSpinLoader 22 | -------------------------------------------------------------------------------- /src/resize-spin/ResizeSpinLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import ResizeSpin from './ResizeSpin' 4 | 5 | const ResizeSpinLoader = props => ( 6 | 7 | ) 8 | 9 | ResizeSpinLoader.propTypes = { 10 | background: PropTypes.string, 11 | color: PropTypes.string, 12 | duration: PropTypes.number, 13 | size: PropTypes.number, 14 | } 15 | 16 | ResizeSpinLoader.defaultProps = { 17 | background: '#fff', 18 | color: '#bebebe', 19 | duration: 2, 20 | size: 4, 21 | } 22 | 23 | export default ResizeSpinLoader -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Code Facebook 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in 8 | all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 11 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 12 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 13 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 14 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 15 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 16 | THE SOFTWARE. 17 | -------------------------------------------------------------------------------- /example/components/Header.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | const linkStyle = { 4 | marginRight: 15, 5 | textDecoration: 'none', 6 | color: '#0b8caf' 7 | } 8 | 9 | const navStyle = { 10 | marginBottom: 50 11 | } 12 | 13 | const Header = () => ( 14 |
15 | 16 | Home 17 | 18 | 19 | Bar 20 | 21 | 22 | Bubble-spin 23 | 24 | 25 | Bubble 26 | 27 | 28 | Comet-spin 29 | 30 | 31 | Cylinder-spin 32 | 33 | 34 | Resize-spin 35 | 36 | 37 | Rotate-spin 38 | 39 | 40 | Spin 41 | 42 |
43 | ) 44 | 45 | export default Header -------------------------------------------------------------------------------- /src/rotate-spin/RotateSpin.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const loading = keyframes` 4 | 0% { 5 | transform: rotate(0deg); 6 | } 7 | 100% { 8 | transform: rotate(360deg); 9 | } 10 | ` 11 | 12 | function getColor(props) { 13 | const d = document.createElement('div') 14 | d.style.color = props.color 15 | document.body.appendChild(d) 16 | const rgbcolor = window.getComputedStyle(d).color; 17 | const match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[.d+]*)*\)/g.exec(rgbcolor) 18 | const color = `${match[1]}, ${match[2]}, ${match[3]}`; 19 | return color 20 | } 21 | 22 | const RotateSpin = styled.div` 23 | animation: ${props => `${loading} ${props.duration}s infinite linear`}; 24 | border: ${props => `1.1em solid rgba(${getColor(props)}, 0.2)`}; 25 | border-left: ${props => `1.1em solid ${props.color}`}; 26 | border-radius: 50%; 27 | font-size: ${props => `${props.size}px`}; 28 | height: 10em; 29 | margin: 60px auto; 30 | position: relative; 31 | text-indent: -9999em; 32 | transform: translateZ(0); 33 | width: 10em; 34 | &:after { 35 | border-radius: 50%; 36 | height: 10em; 37 | width: 10em; 38 | } 39 | ` 40 | 41 | export default RotateSpin -------------------------------------------------------------------------------- /src/spin/Spin.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const loading = keyframes` 4 | 0% { 5 | transform: rotate(0deg); 6 | } 7 | 100% { 8 | transform: rotate(360deg); 9 | } 10 | ` 11 | 12 | const Spin = styled.div` 13 | animation: ${props => `${loading} ${props.duration}s infinite linear;`}; 14 | background: ${props => props.color}; 15 | background: ${props => `linear-gradient(to right, ${props.color} 10%, rgba(255, 255, 255, 0) 42%);`}; 16 | border-radius: 50%; 17 | font-size: ${props => `${props.size}px`}; 18 | height: 11em; 19 | margin: 50px auto; 20 | position: relative; 21 | text-indent: -9999em; 22 | transform: translateZ(0); 23 | width: 11em; 24 | &:before { 25 | background: ${props => props.color}; 26 | border-radius: 100% 0 0 0; 27 | content: ''; 28 | height: 50%; 29 | left: 0; 30 | position: absolute; 31 | top: 0; 32 | width: 50%; 33 | } 34 | &:after { 35 | background: ${props => props.background}; 36 | border-radius: 50%; 37 | bottom: 0; 38 | content: ''; 39 | height: 75%; 40 | left: 0; 41 | margin: auto; 42 | position: absolute; 43 | right: 0; 44 | top: 0; 45 | width: 75%; 46 | } 47 | ` 48 | 49 | export default Spin -------------------------------------------------------------------------------- /src/resize-spin/ResizeSpin.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const loading = keyframes` 4 | 0% { 5 | transform: rotate(0deg); 6 | } 7 | 100% { 8 | transform: rotate(360deg); 9 | } 10 | ` 11 | 12 | const ResizeSpin = styled.div` 13 | border-radius: 50%; 14 | box-shadow: inset 0 0 0 1em; 15 | color: ${props => props.color}; 16 | font-size: ${props => `${props.size}px`}; 17 | height: 10em; 18 | margin: 55px auto; 19 | position: relative; 20 | text-indent: -99999em; 21 | transform: translateZ(0); 22 | width: 10em; 23 | &:before { 24 | animation: ${props => `${loading} ${props.duration}s infinite ease 1.5s`}; 25 | background: ${props => props.background}; 26 | border-radius: 50%; 27 | border-radius: 10.2em 0 0 10.2em; 28 | content: ''; 29 | height: 10.2em; 30 | left: -0.1em; 31 | position: absolute; 32 | top: -0.1em; 33 | transform-origin: 5.2em 5.1em; 34 | width: 5.2em; 35 | } 36 | &:after { 37 | animation: ${props => `${loading} ${props.duration}s infinite ease`}; 38 | background: ${props => props.background}; 39 | border-radius: 50%; 40 | border-radius: 0 10.2em 10.2em 0; 41 | content: ''; 42 | height: 10.2em; 43 | left: 5.1em; 44 | position: absolute; 45 | top: -0.1em; 46 | transform-origin: 0px 5.1em; 47 | width: 5.2em; 48 | } 49 | ` 50 | 51 | export default ResizeSpin -------------------------------------------------------------------------------- /src/bubble/Bubble.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const loading = keyframes` 4 | 0%, 5 | 80%, 6 | 100% { 7 | box-shadow: 0 2.5em 0 -1.3em; 8 | } 9 | 40% { 10 | box-shadow: 0 2.5em 0 0; 11 | } 12 | ` 13 | 14 | const Bubble = styled.div` 15 | animation: ${props => `${loading} ${props.duration}s infinite ease-in-out;`}; 16 | animation-delay: ${props => `${props.duration * -0.16}s`}; 17 | animation-fill-mode: both; 18 | border-radius: 50%; 19 | color: ${props => props.color}; 20 | font-size: ${props => `${props.size}px`}; 21 | height: 2.5em; 22 | margin: 80px auto; 23 | position: relative; 24 | text-indent: -9999em; 25 | transform: translateZ(0); 26 | width: 2.5em; 27 | &:before { 28 | animation: ${props => `${loading} ${props.duration}s infinite ease-in-out;`}; 29 | animation-delay: ${props => `${props.duration * -0.32}s`}; 30 | animation-fill-mode: both; 31 | border-radius: 50%; 32 | content: ''; 33 | height: 2.5em; 34 | left: -3.5em; 35 | position: absolute; 36 | top: 0; 37 | width: 2.5em; 38 | } 39 | &:after { 40 | animation: ${props => `${loading} ${props.duration}s infinite ease-in-out;`}; 41 | animation-fill-mode: both; 42 | border-radius: 50%; 43 | content: ''; 44 | height: 2.5em; 45 | left: 3.5em; 46 | position: absolute; 47 | top: 0; 48 | width: 2.5em; 49 | } 50 | ` 51 | 52 | export default Bubble -------------------------------------------------------------------------------- /src/bar/Bar.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const loading = keyframes` 4 | 0%, 5 | 80%, 6 | 100% { 7 | box-shadow: 0 0; 8 | height: 4em; 9 | } 10 | 40% { 11 | box-shadow: 0 -2em; 12 | height: 5em; 13 | } 14 | ` 15 | 16 | const Bar = styled.div` 17 | animation: ${props => `${loading} ${props.duration}s infinite ease-in-out`}; 18 | animation-delay: ${props => `${props.duration * -0.16}s`}; 19 | background: ${props => props.color}; 20 | color: ${props => props.color}; 21 | font-size: ${props => `${props.size}px`}; 22 | height: 4em; 23 | margin: 88px auto; 24 | position: relative; 25 | text-indent: -9999em; 26 | transform: translateZ(0); 27 | width: 1em; 28 | &:before { 29 | animation: ${props => `${loading} ${props.duration}s infinite ease-in-out;`}; 30 | animation-delay: ${props => `${props.duration * -0.32}s`}; 31 | background: ${props => props.color}; 32 | content: ''; 33 | height: 4em; 34 | left: -1.5em; 35 | position: absolute; 36 | top: 0; 37 | width: 1em; 38 | } 39 | &:after { 40 | animation: ${props => `${loading} ${props.duration}s infinite ease-in-out`}; 41 | animation-delay: ${props => `${props.duration * 0.08}s`}; 42 | background: ${props => props.color}; 43 | content: ''; 44 | height: 4em; 45 | left: 1.5em; 46 | position: absolute; 47 | top: 0; 48 | width: 1em; 49 | } 50 | ` 51 | 52 | export default Bar -------------------------------------------------------------------------------- /src/comet-spin/CometSpin.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const loading = keyframes` 4 | 0% { 5 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 6 | } 7 | 5%, 8 | 95% { 9 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 10 | } 11 | 10%, 12 | 59% { 13 | box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; 14 | } 15 | 20% { 16 | box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; 17 | } 18 | 38% { 19 | box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; 20 | } 21 | 100% { 22 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 23 | } 24 | ` 25 | 26 | const round = keyframes` 27 | 0% { 28 | transform: rotate(0deg); 29 | } 30 | 100% { 31 | transform: rotate(360deg); 32 | } 33 | ` 34 | 35 | const CometSpin = styled.div` 36 | animation: ${props => `${loading} ${props.duration}s infinite ease, ${round} ${props.duration}s infinite ease`}; 37 | border-radius: 50%; 38 | color: ${props => props.color}; 39 | font-size: ${props => `${props.size}px`}; 40 | height: 1em; 41 | margin: 72px auto; 42 | overflow: hidden; 43 | position: relative; 44 | text-indent: -9999em; 45 | transform: translateZ(0); 46 | width: 1em; 47 | ` 48 | 49 | export default CometSpin -------------------------------------------------------------------------------- /src/bubble-spin/BubbleSpin.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | const loading = keyframes` 4 | 0%, 5 | 100% { 6 | box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; 7 | } 8 | 12.5% { 9 | box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 10 | } 11 | 25% { 12 | box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 13 | } 14 | 37.5% { 15 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; 16 | } 17 | 50% { 18 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; 19 | } 20 | 62.5% { 21 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; 22 | } 23 | 75% { 24 | box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; 25 | } 26 | 87.5% { 27 | box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; 28 | } 29 | ` 30 | 31 | const BubbleSpin = styled.div` 32 | animation: ${props => `${loading} ${props.duration}s infinite linear;`}; 33 | border-radius: 50%; 34 | color: ${props => props.color}; 35 | font-size: ${props => `${props.size}px`}; 36 | height: 1em; 37 | margin: 100px auto; 38 | position: relative; 39 | text-indent: -9999em; 40 | transform: translateZ(0); 41 | width: 1em; 42 | ` 43 | 44 | export default BubbleSpin -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-page-loading", 3 | "version": "1.0.2", 4 | "description": "React page loading components using to display a loading spin until the page loads completely.", 5 | "main": "dist/react-page-loading.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "lint": "./node_modules/.bin/eslint lib/*.jsx", 9 | "prepush": "npm run lint", 10 | "build": "webpack --config webpack.config.prod.js --output-filename react-page-loading.js" 11 | }, 12 | "author": "Bunlong", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "babel-core": "^6.7.7", 16 | "babel-eslint": "^7.1.1", 17 | "babel-loader": "^7.1.1", 18 | "babel-polyfill": "^6.7.4", 19 | "babel-preset-es2015": "6.24.0", 20 | "babel-preset-react": "^6.11.1", 21 | "babel-register": "^6.24.1", 22 | "chai": "^3.5.0", 23 | "clean-webpack-plugin": "^0.1.8", 24 | "copy-webpack-plugin": "^2.1.1", 25 | "coveralls": "^2.13.1", 26 | "enzyme": "^2.8.0", 27 | "eslint": "^3.19.0", 28 | "eslint-config-airbnb": "^14.1.0", 29 | "eslint-plugin-import": "^2.2.0", 30 | "eslint-plugin-jsx-a11y": "^4.0.0", 31 | "eslint-plugin-react": "^6.10.3", 32 | "file-loader": "^0.11.1", 33 | "husky": "^0.13.3", 34 | "jsdom": "^9.12.0", 35 | "mocha": "^3.2.0", 36 | "nyc": "^10.2.0", 37 | "react-addons-test-utils": "^15.5.0", 38 | "sinon": "^2.1.0", 39 | "webpack": "^3.3.0", 40 | "webpack-dev-server": "^2.5.1" 41 | }, 42 | "dependencies": { 43 | "prop-types": "^15.5.8", 44 | "react": "^15.5.4", 45 | "react-dom": "^15.5.4", 46 | "styled-components": "^3.2.6" 47 | }, 48 | "keywords": [ 49 | "react-page-loading", 50 | "page-loading", 51 | "page-load", 52 | "page-loading-spin", 53 | "page-load-spin", 54 | "react", 55 | "react-component", 56 | "react-components", 57 | "react" 58 | ], 59 | "bugs": { 60 | "url": "https://github.com/codefacebook/react-page-loading/issues" 61 | }, 62 | "homepage": "https://github.com/codefacebook/react-page-loading", 63 | "repository": { 64 | "type": "git", 65 | "url": "https://github.com/codefacebook/react-page-loading" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![react-page-loading](https://github.com/codefacebook/react-page-loading/blob/master/images/react-page-loading.png) 2 | 3 | # react-page-loading [![version](https://img.shields.io/npm/v/react-page-loading.svg?style=flat-square)](https://www.npmjs.com/package/react-page-loading) [![downloads](https://img.shields.io/npm/dm/react-page-loading.svg?style=flat-square)](https://www.npmjs.com/package/react-page-loading) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](http://opensource.org/licenses/MIT) 4 | 5 | React page loading components using to display a loading spin until the page loads completely. 6 | 7 | We'd love to have your helping hand on contributions to react-page-loading by forking and sending a pull request! 8 | 9 | react-page-loading features 10 | 11 | ## Features 12 | 13 | * Working with react-router 14 | 15 | * Working with react-router-redux 16 | 17 | * ... etc. 18 | 19 | ## Installation 20 | 21 | ``` 22 | npm install react-page-loading --save 23 | ``` 24 | 25 | ## Usage 26 | 27 | ``` 28 | import React, { Component } from 'react' 29 | import Page from 'react-page-loading' 30 | 31 | export default class App extends Component { 32 | constructor(props) { 33 | super(props) 34 | } 35 | 36 | render() { 37 | return ( 38 |
39 | 40 |

Title

41 |

content goes here

42 | 43 |
44 | ) 45 | } 46 | } 47 | ``` 48 | 49 | ## Properties 50 | 51 | | Name | Type | Default value | 52 | |:------------- |:---------------- |:-------------- | 53 | | loader | PropTypes.string | bar | 54 | | color | PropTypes.string | #A9A9A9 | 55 | | size | PropTypes.number | 4 | 56 | | duration | PropTypes.number | 1 | 57 | 58 | ### loader 59 | 60 | | Value | 61 | |:------------- | 62 | | bar | 63 | | bubble-spin | 64 | | bubble | 65 | | comet-spin | 66 | | cylinder-spin | 67 | | resize-spin | 68 | | rotate-spin | 69 | | spin | 70 | 71 | ## Contributing 72 | 73 | We'd love to have your helping hand on contributions to react-chartjsx by forking and sending a pull request! 74 | 75 | Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠) 76 | 77 | ## License 78 | 79 | MIT License 80 | 81 | Copyright (c) 2018 [codefacebook](https://github.com/codefacebook), Maintained by [Bunlong](https://github.com/Bunlong) 82 | -------------------------------------------------------------------------------- /src/cylinder-spin/CylinderSpin.js: -------------------------------------------------------------------------------- 1 | import styled, { keyframes } from 'styled-components' 2 | 3 | function animation(props) { 4 | const d = document.createElement('div') 5 | d.style.color = props.color 6 | document.body.appendChild(d) 7 | const rgbcolor = window.getComputedStyle(d).color 8 | const match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[.d+]*)*\)/g.exec(rgbcolor) 9 | const color = `${match[1]}, ${match[2]}, ${match[3]}` 10 | 11 | return keyframes` 12 | 0%, 13 | 100% { 14 | box-shadow: 0em -2.6em 0em 0em ${props.color}, 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.5), -1.8em -1.8em 0 0em rgba(${color}, 0.7); 15 | } 16 | 12.5% { 17 | box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.7), 1.8em -1.8em 0 0em ${props.color}, 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.5); 18 | } 19 | 25% { 20 | box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.5), 1.8em -1.8em 0 0em rgba(${color}, 0.7), 2.5em 0em 0 0em ${props.color}, 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2); 21 | } 22 | 37.5% { 23 | box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.5), 2.5em 0em 0 0em rgba(${color}, 0.7), 1.75em 1.75em 0 0em ${props.color}, 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2); 24 | } 25 | 50% { 26 | box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.5), 1.75em 1.75em 0 0em rgba(${color}, 0.7), 0em 2.5em 0 0em ${props.color}, -1.8em 1.8em 0 0em rgba(${color}, 0.2), -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2); 27 | } 28 | 62.5% { 29 | box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.5), 0em 2.5em 0 0em rgba(${color}, 0.7), -1.8em 1.8em 0 0em ${props.color}, -2.6em 0em 0 0em rgba(${color}, 0.2), -1.8em -1.8em 0 0em rgba(${color}, 0.2); 30 | } 31 | 75% { 32 | box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.5), -1.8em 1.8em 0 0em rgba(${color}, 0.7), -2.6em 0em 0 0em ${props.color}, -1.8em -1.8em 0 0em rgba(${color}, 0.2); 33 | } 34 | 87.5% { 35 | box-shadow: 0em -2.6em 0em 0em rgba(${color}, 0.2), 1.8em -1.8em 0 0em rgba(${color}, 0.2), 2.5em 0em 0 0em rgba(${color}, 0.2), 1.75em 1.75em 0 0em rgba(${color}, 0.2), 0em 2.5em 0 0em rgba(${color}, 0.2), -1.8em 1.8em 0 0em rgba(${color}, 0.5), -2.6em 0em 0 0em rgba(${color}, 0.7), -1.8em -1.8em 0 0em ${props.color}; 36 | } 37 | `; 38 | } 39 | 40 | const CylinderSpin = styled.div` 41 | animation: ${props => `${animation(props)} ${props.duration}s infinite ease;`}; 42 | border-radius: 50%; 43 | font-size: ${props => `${props.size}px`}; 44 | height: 1em; 45 | margin: 100px auto; 46 | position: relative; 47 | text-indent: -9999em; 48 | transform: translateZ(0); 49 | width: 1em; 50 | ` 51 | 52 | export default CylinderSpin -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import BarLoader from './bar/BarLoader' 4 | import BubbleSpinLoader from './bubble-spin/BubbleSpinLoader' 5 | import BubbleLoader from './bubble/BubbleLoader' 6 | import CometSpinLoader from './comet-spin/CometSpinLoader' 7 | import CylinderSpinLoader from './cylinder-spin/CylinderSpinLoader' 8 | import ResizeSpinLoader from './resize-spin/ResizeSpinLoader' 9 | import RotateSpinLoader from './rotate-spin/RotateSpinLoader' 10 | import SpinLoader from './spin/SpinLoader' 11 | 12 | export default class PageLoading extends React.Component { 13 | constructor(props) { 14 | super(props) 15 | this.state = { 16 | loading: true 17 | } 18 | } 19 | 20 | componentDidMount() { 21 | setTimeout(() => { 22 | this.setState({ loading: false }) 23 | }, 1000) 24 | } 25 | 26 | render() { 27 | const { loading } = this.state 28 | const { color, duration, size, loader } = this.props 29 | 30 | let containerStyle = { 31 | position: 'absolute', 32 | left: '50%', 33 | top: '50%', 34 | transform: 'translate(-50%, -50%)' 35 | } 36 | 37 | if (loading) { 38 | if (loader == "bar") { 39 | return ( 40 |
41 | 45 |
46 | ) 47 | } else if (loader == "bubble-spin") { 48 | return ( 49 |
50 | 54 |
55 | ) 56 | } else if (loader == "bubble") { 57 | return ( 58 |
59 | 63 |
64 | ) 65 | } else if (loader == "comet-spin") { 66 | return ( 67 |
68 | 72 |
73 | ) 74 | } else if (loader == "cylinder-spin") { 75 | return ( 76 |
77 | 81 |
82 | ) 83 | } else if (loader == "resize-spin") { 84 | return ( 85 |
86 | 90 |
91 | ) 92 | } else if (loader == "rotate-spin") { 93 | return ( 94 |
95 | 99 |
100 | ) 101 | } else if (loader == "spin") { 102 | return ( 103 |
104 | 108 |
109 | ) 110 | } 111 | } 112 | 113 | return ( 114 |
115 | { this.props.children } 116 |
117 | ) 118 | } 119 | } 120 | 121 | PageLoading.propTypes = { 122 | color: PropTypes.string, 123 | duration: PropTypes.number, 124 | size: PropTypes.number, 125 | loader: PropTypes.string, 126 | } 127 | 128 | PageLoading.defaultProps = { 129 | color: '#A9A9A9', 130 | duration: 1.3, 131 | size: 4, 132 | loader: "bar", 133 | } --------------------------------------------------------------------------------