├── .eslintignore ├── .npmignore ├── examples └── simple │ ├── .env │ ├── public │ ├── favicon.ico │ ├── manifest.json │ └── index.html │ ├── src │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── App.css │ ├── App.js │ ├── logo.svg │ └── serviceWorker.js │ ├── .gitignore │ ├── package.json │ └── README.md ├── demo ├── .babelrc ├── webpack │ ├── favicon.ico │ ├── PATHS.js │ ├── template.html │ ├── webpack.config.prod.js │ ├── webpack.config.dev.js │ ├── webpack.parts.js │ └── webpack.config.js ├── postcss.config.js ├── js │ ├── index.js │ ├── Footer.jsx │ ├── App.jsx │ ├── Header.jsx │ └── List.jsx ├── styles │ ├── MainPreload.scss │ ├── normalize.scss │ └── style.scss ├── .eslintrc └── package.json ├── .babelrc ├── assets └── react-preloaders-card.jpg ├── .gitignore ├── .travis.yml ├── src ├── Preloader │ ├── index.js │ ├── withPreloader.jsx │ ├── PreloaderStyles.js │ ├── animations.js │ └── StyledPreloader.jsx ├── setupTests.js ├── __test__ │ ├── __snapshots__ │ │ └── StyledPreloader.test.jsx.snap │ └── StyledPreloader.test.jsx ├── Circle2 │ ├── Circle2.jsx │ └── Circle2Styles.js ├── Cube │ ├── Cube.jsx │ └── CubeStyles.js ├── index.js ├── Sugar │ ├── Sugar.jsx │ └── SugarStyles.js ├── Ripple │ ├── Ripple.jsx │ └── RippleStyles.js ├── Zoom │ ├── Zoom.jsx │ └── ZoomStyles.js ├── Dots │ ├── Dots.jsx │ └── DotsStyles.js ├── Lines │ ├── Lines.jsx │ └── LinesStyles.js ├── Circle │ ├── Circle.jsx │ └── CircleStyles.js └── Planets │ ├── Planets.jsx │ └── PlanetsStyles.js ├── .eslintrc.json ├── webpack.config.js ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── LICENSE ├── package.json └── README.MD /.eslintignore: -------------------------------------------------------------------------------- 1 | /lib -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | assets 3 | examples -------------------------------------------------------------------------------- /examples/simple/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-react", "@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /demo/webpack/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VamOSGS/react-preloaders/HEAD/demo/webpack/favicon.ico -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": [ 4 | "transform-react-jsx" 5 | ] 6 | } -------------------------------------------------------------------------------- /assets/react-preloaders-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VamOSGS/react-preloaders/HEAD/assets/react-preloaders-card.jpg -------------------------------------------------------------------------------- /examples/simple/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VamOSGS/react-preloaders/HEAD/examples/simple/public/favicon.ico -------------------------------------------------------------------------------- /demo/postcss.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require("autoprefixer"); 2 | 3 | module.exports = { 4 | plugins: [autoprefixer] 5 | }; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.idea 3 | yarn-error.log 4 | dist 5 | demo/node_modules 6 | demo/dist 7 | demo/.env 8 | build 9 | examples/*/node_modules 10 | lib -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 10.16.0 4 | 5 | cache: 6 | directories: 7 | - 'node_modules' 8 | 9 | script: 10 | - yarn build 11 | -------------------------------------------------------------------------------- /src/Preloader/index.js: -------------------------------------------------------------------------------- 1 | import StyledPreloader from './StyledPreloader'; 2 | import withPreloader from './withPreloader'; 3 | 4 | export { withPreloader }; 5 | export default StyledPreloader; 6 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import { configure } from 'enzyme'; 3 | import Adapter from 'enzyme-adapter-react-16'; 4 | 5 | configure({ adapter: new Adapter() }); 6 | -------------------------------------------------------------------------------- /demo/js/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import React from 'react'; 3 | import App from './App'; 4 | import '../styles/style.scss'; 5 | 6 | // eslint-disable-next-line 7 | ReactDOM.render(, document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /demo/webpack/PATHS.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | SRC: path.resolve('js'), 5 | DIST: path.resolve('dist'), 6 | APP: path.resolve('js/index'), 7 | TEMPLATE: path.resolve('webpack/template.html'), 8 | POSTCSS: path.resolve('postcss.config.js'), 9 | }; 10 | -------------------------------------------------------------------------------- /examples/simple/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /demo/styles/MainPreload.scss: -------------------------------------------------------------------------------- 1 | #preloader { 2 | height: 100vh; 3 | width: 100vw; 4 | justify-content: center; 5 | align-items: center; 6 | display: flex; 7 | transition: opacity 0.3s linear, visibility 0.2s linear 0.3s; 8 | opacity: 1; 9 | &.close { 10 | opacity: 0; 11 | visibility: hidden; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/simple/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /demo/js/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from 'react-icons-kit'; 3 | import { heart } from 'react-icons-kit/icomoon/heart'; 4 | 5 | const Footer = () => ( 6 |
7 |
8 | Made with by 9 | Gegham Samvelyan(VamOSGS) 10 |
11 |
12 | ); 13 | 14 | export default Footer; 15 | -------------------------------------------------------------------------------- /src/Preloader/withPreloader.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /* eslint-disable react/destructuring-assignment */ 3 | import React from 'react'; 4 | import StyledPreloader from './StyledPreloader'; 5 | 6 | const withPrelaoder = Element => props => ( 7 | 8 | 9 | 10 | ); 11 | 12 | export default withPrelaoder; 13 | -------------------------------------------------------------------------------- /examples/simple/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /demo/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": ["airbnb"], 4 | "globals": { 5 | "document": true, 6 | "window": true 7 | }, 8 | "rules": { 9 | "no-unused-vars": "warn", 10 | "no-console": 0, 11 | "react/prop-types": 0, 12 | "react/no-unescaped-entities": 0, 13 | "no-return-assign": 0, 14 | "react/no-array-index-key": 0, 15 | "react/prefer-stateless-function": 0 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/simple/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/__test__/__snapshots__/StyledPreloader.test.jsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`StyledPreloader renders correctly 1`] = ` 4 | 15 | 19 | 20 | `; 21 | -------------------------------------------------------------------------------- /src/Preloader/PreloaderStyles.js: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | import { slideAnimation, fadeAnimation } from './animations'; 3 | 4 | const PreloaderStyles = css` 5 | z-index: 9999; 6 | position: fixed; 7 | ${slideAnimation} 8 | ${fadeAnimation} 9 | height: 100vh; 10 | width: 100vw; 11 | justify-content: center; 12 | align-items: center; 13 | display: flex; 14 | background: ${props => props.background}; 15 | `; 16 | 17 | export default PreloaderStyles; 18 | -------------------------------------------------------------------------------- /src/__test__/StyledPreloader.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import StyledPreloader from '../Preloader'; 4 | import Circle from '../Circle/Circle'; 5 | import 'jest-styled-components'; 6 | 7 | describe('StyledPreloader', () => { 8 | it('renders correctly', () => { 9 | const component = shallow( 10 | 11 | 12 | , 13 | ); 14 | expect(component).toMatchSnapshot(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/Circle2/Circle2.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | import { withPreloader } from '../Preloader'; 5 | import Circle2Styles from './Circle2Styles'; 6 | 7 | const Circle2 = ({ className }) =>
; 8 | 9 | Circle2.propTypes = { 10 | className: PropTypes.string, 11 | }; 12 | 13 | const StyledCircle2 = styled(Circle2)` 14 | ${Circle2Styles} 15 | `; 16 | 17 | export default withPreloader(StyledCircle2); 18 | -------------------------------------------------------------------------------- /examples/simple/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /src/Cube/Cube.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { withPreloader } from '../Preloader'; 5 | import CubeStyles from './CubeStyles'; 6 | 7 | const Cube = ({ className }) => ( 8 |
9 | 10 |
11 | ); 12 | Cube.propTypes = { 13 | className: PropTypes.string, 14 | }; 15 | 16 | const StyledCube = styled(Cube)` 17 | ${CubeStyles} 18 | `; 19 | 20 | export default withPreloader(StyledCube); 21 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Circle from './Circle/Circle'; 2 | import Zoom from './Zoom/Zoom'; 3 | import Lines from './Lines/Lines'; 4 | import Circle2 from './Circle2/Circle2'; 5 | import Cube from './Cube/Cube'; 6 | import Dots from './Dots/Dots'; 7 | import Ripple from './Ripple/Ripple'; 8 | import Planets from './Planets/Planets'; 9 | import Sugar from './Sugar/Sugar'; 10 | import CustomPreloader from './Preloader'; 11 | 12 | export { 13 | Circle, Zoom, Sugar, Planets, Ripple, Dots, Lines, Circle2, Cube, CustomPreloader, 14 | }; 15 | -------------------------------------------------------------------------------- /src/Sugar/Sugar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { withPreloader } from '../Preloader'; 5 | import SugarStyles from './SugarStyles'; 6 | 7 | const Sugar = ({ className }) => ( 8 |
9 | 10 |
11 | ); 12 | Sugar.propTypes = { 13 | className: PropTypes.string, 14 | }; 15 | 16 | const StyledSugar = styled(Sugar)` 17 | ${SugarStyles} 18 | `; 19 | export default withPreloader(StyledSugar); 20 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "jest/globals": true 7 | }, 8 | "extends": "airbnb", 9 | "globals": { 10 | "Atomics": "readonly", 11 | "SharedArrayBuffer": "readonly" 12 | }, 13 | "parserOptions": { 14 | "ecmaFeatures": { 15 | "jsx": true 16 | }, 17 | "ecmaVersion": 2018, 18 | "sourceType": "module" 19 | }, 20 | "plugins": ["react", "jest"], 21 | "rules": { 22 | "react/require-default-props": 0 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/Ripple/Ripple.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { withPreloader } from '../Preloader'; 5 | import RippleStyles from './RippleStyles'; 6 | 7 | const Ripple = ({ className }) => ( 8 |
9 |
10 |
11 |
12 | ); 13 | Ripple.propTypes = { 14 | className: PropTypes.string, 15 | }; 16 | 17 | const StyledRipple = styled(Ripple)` 18 | ${RippleStyles} 19 | `; 20 | export default withPreloader(StyledRipple); 21 | -------------------------------------------------------------------------------- /demo/js/App.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import React from 'react'; 3 | import { Sugar } from 'react-preloaders'; 4 | import Header from './Header'; 5 | import Footer from './Footer'; 6 | import List from './List'; 7 | 8 | const App = () => ( 9 |
10 |

React Preloaders

11 |
12 |
13 | 14 |
15 |
16 | 20 |
21 | ); 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './src', 6 | output: { 7 | path: path.resolve(__dirname, 'lib'), 8 | filename: 'index.js', 9 | libraryTarget: 'commonjs2', 10 | }, 11 | resolve: { 12 | modules: ['node_modules', path.resolve('src')], 13 | extensions: ['.js', '.jsx'], 14 | }, 15 | 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.jsx?$/, 20 | exclude: /node_modules/, 21 | loader: 'babel-loader', 22 | }, 23 | ], 24 | }, 25 | externals: { 26 | react: 'commonjs react', 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /demo/js/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icon from 'react-icons-kit'; 3 | import { github } from 'react-icons-kit/icomoon/github'; 4 | import { npm } from 'react-icons-kit/icomoon/npm'; 5 | 6 | const Header = () => ( 7 |
8 |
9 | Download this package from 10 | 11 | PM 12 | 13 | and read more in 14 | 15 | Github 16 | 17 |
18 |
19 | ); 20 | 21 | export default Header; 22 | -------------------------------------------------------------------------------- /src/Zoom/Zoom.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | import { withPreloader } from '../Preloader'; 5 | import ZoomStyles from './ZoomStyles'; 6 | 7 | const items = new Array(5).fill(''); 8 | const Zoom = ({ className }) => ( 9 |
10 | {items.map((i, key) => ( 11 |
12 | ))} 13 |
14 | ); 15 | Zoom.propTypes = { 16 | className: PropTypes.string, 17 | }; 18 | 19 | const StyledZoom = styled(Zoom)` 20 | ${ZoomStyles} 21 | `; 22 | export default withPreloader(StyledZoom); 23 | -------------------------------------------------------------------------------- /examples/simple/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/Dots/Dots.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { withPreloader } from '../Preloader'; 5 | import DotsStyles from './DotsStyles'; 6 | 7 | const items = new Array(4).fill(''); 8 | const Dots = ({ className }) => ( 9 |
10 | {items.map((i, key) => ( 11 |
12 | ))} 13 |
14 | ); 15 | Dots.propTypes = { 16 | className: PropTypes.string, 17 | }; 18 | 19 | const StyledDots = styled(Dots)` 20 | ${DotsStyles} 21 | `; 22 | 23 | export default withPreloader(StyledDots); 24 | -------------------------------------------------------------------------------- /src/Lines/Lines.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | import { withPreloader } from '../Preloader'; 5 | import LinesStyles from './LinesStyles'; 6 | 7 | const items = new Array(6).fill(''); 8 | const Lines = ({ className }) => ( 9 |
10 |
    11 | {items.map((i, key) => ( 12 |
  • 13 | ))} 14 |
15 |
16 | ); 17 | Lines.propTypes = { 18 | className: PropTypes.string, 19 | }; 20 | 21 | const StyledLines = styled(Lines)` 22 | ${LinesStyles} 23 | `; 24 | export default withPreloader(StyledLines); 25 | -------------------------------------------------------------------------------- /src/Ripple/RippleStyles.js: -------------------------------------------------------------------------------- 1 | import { css, keyframes } from 'styled-components'; 2 | 3 | const ripple = keyframes` 4 | from { 5 | transform: scale(0); 6 | opacity: 1; 7 | } 8 | 9 | to { 10 | transform: scale(1); 11 | opacity: 0; 12 | } 13 | `; 14 | 15 | const Ripple = css` 16 | width: 100px; 17 | height: 100px; 18 | div { 19 | opacity:0; 20 | animation: 1.5s ${ripple} infinite; 21 | position: absolute; 22 | width: 90px; 23 | height: 90px; 24 | border-radius: 50%; 25 | border: 5px solid ${props => props.color}; 26 | &:nth-child(2) { 27 | animation-delay: 0.5s; 28 | } 29 | } 30 | `; 31 | 32 | export default Ripple; 33 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: vamosgs 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with a single custom sponsorship URL 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /examples/simple/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Planets } from 'react-preloaders'; 3 | import logo from './logo.svg'; 4 | import './App.css'; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 |
11 | logo 12 |

13 | Edit src/App.js and save to reload. 14 |

15 | 21 | Learn React 22 | 23 |
24 |
25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /examples/simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.6", 7 | "react-dom": "^16.8.6", 8 | "react-scripts": "3.0.1" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/Circle/Circle.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import PropTypes from 'prop-types'; 4 | import { withPreloader } from '../Preloader'; 5 | import CircleStyles from './CircleStyles'; 6 | 7 | const Circle = ({ className, color }) => ( 8 | 9 | 19 | 20 | ); 21 | Circle.propTypes = { 22 | className: PropTypes.string, 23 | color: PropTypes.string, 24 | }; 25 | 26 | const StyledCircle = styled(Circle)` 27 | ${CircleStyles} 28 | `; 29 | 30 | export default withPreloader(StyledCircle); 31 | -------------------------------------------------------------------------------- /src/Zoom/ZoomStyles.js: -------------------------------------------------------------------------------- 1 | import { keyframes, css } from 'styled-components'; 2 | 3 | const sdelay = keyframes` 4 | 0%, 5 | 40%, 6 | 100% { 7 | transform: scaleY(0.6); 8 | } 9 | 20% { 10 | transform: scaleY(1); 11 | } 12 | `; 13 | 14 | const ZoomStyles = css` 15 | margin: 100px auto; 16 | width: 50px; 17 | height: 60px; 18 | text-align: center; 19 | font-size: 10px; 20 | > div { 21 | height: 100%; 22 | width: 6px; 23 | display: inline-block; 24 | margin: 2px; 25 | background: ${props => props.color}; 26 | animation: ${sdelay} 1.2s infinite ease-in-out; 27 | } 28 | .rect2 { 29 | animation-delay: -1.1s; 30 | } 31 | .rect3 { 32 | animation-delay: -1s; 33 | } 34 | .rect4 { 35 | animation-delay: -0.9s; 36 | } 37 | .rect5 { 38 | animation-delay: -0.8s; 39 | } 40 | `; 41 | 42 | export default ZoomStyles; 43 | -------------------------------------------------------------------------------- /src/Planets/Planets.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import { withPreloader } from '../Preloader'; 5 | import PlanetsStyles from './PlanetsStyles'; 6 | 7 | const Planets = ({ className }) => ( 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | ); 21 | Planets.propTypes = { 22 | className: PropTypes.string, 23 | }; 24 | 25 | const StyledPlanets = styled(Planets)` 26 | ${PlanetsStyles} 27 | `; 28 | export default withPreloader(StyledPlanets); 29 | -------------------------------------------------------------------------------- /demo/webpack/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | <%= htmlWebpackPlugin.options.title %> 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /demo/webpack/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const parts = require('./webpack.parts'); 3 | const PATHS = require('./PATHS'); 4 | require('dotenv').config(); 5 | 6 | const production = merge( 7 | { 8 | plugins: [parts.extractSass], 9 | }, 10 | parts.buildSetup('production'), 11 | parts.setMode('production'), 12 | parts.sourceMaps('source-map'), 13 | parts.styleLoader({ 14 | use: parts.extractSass.extract({ 15 | use: [ 16 | { 17 | loader: 'css-loader', 18 | options: { minimize: true }, 19 | }, 20 | { 21 | loader: 'sass-loader', 22 | }, 23 | { 24 | loader: 'postcss-loader', 25 | options: { 26 | config: { 27 | path: PATHS.POSTCSS, 28 | }, 29 | }, 30 | }, 31 | ], 32 | fallback: 'style-loader', 33 | }), 34 | }), 35 | ); 36 | 37 | module.exports = production; 38 | -------------------------------------------------------------------------------- /src/Dots/DotsStyles.js: -------------------------------------------------------------------------------- 1 | import { keyframes, css } from 'styled-components'; 2 | 3 | const sdelay = keyframes` 4 | 0%, 5 | 40%, 6 | 100% { 7 | transform: translateY(-10px); 8 | -webkit-transform: translateY(-10px); 9 | } 10 | 20% { 11 | transform: translateY(-20px); 12 | -webkit-transform: translateY(-20px); 13 | } 14 | `; 15 | 16 | const DotsStyles = css` 17 | height: 30px; 18 | text-align: center; 19 | font-size: 10px; 20 | > div { 21 | background: ${props => props.color}; 22 | height: 10px; 23 | width: 10px; 24 | border-radius: 50%; 25 | margin: 0 10px; 26 | display: inline-block; 27 | animation: ${sdelay} 0.7s infinite ease-in-out; 28 | } 29 | .circ2 { 30 | animation-delay: -0.6s; 31 | } 32 | .circ3 { 33 | animation-delay: -0.5s; 34 | } 35 | .circ4 { 36 | animation-delay: -0.4s; 37 | } 38 | .circ5 { 39 | animation-delay: -0.3s; 40 | } 41 | `; 42 | 43 | export default DotsStyles; 44 | -------------------------------------------------------------------------------- /demo/webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const PATHS = require('./PATHS'); 3 | const parts = require('./webpack.parts'); 4 | require('dotenv').config(); 5 | 6 | const development = merge( 7 | { 8 | devServer: { 9 | contentBase: PATHS.DIST, 10 | compress: true, 11 | historyApiFallback: true, 12 | hot: true, 13 | }, 14 | }, 15 | parts.buildSetup('development'), 16 | parts.setMode('development'), 17 | parts.sourceMaps('eval-source-map'), 18 | parts.styleLoader({ 19 | use: [ 20 | { 21 | loader: 'style-loader', 22 | }, 23 | { 24 | loader: 'css-loader', 25 | }, 26 | { 27 | loader: 'sass-loader', 28 | }, 29 | { 30 | loader: 'postcss-loader', 31 | options: { 32 | config: { 33 | path: PATHS.POSTCSS, 34 | }, 35 | }, 36 | }, 37 | ], 38 | }), 39 | ); 40 | 41 | module.exports = development; 42 | -------------------------------------------------------------------------------- /src/Preloader/animations.js: -------------------------------------------------------------------------------- 1 | export const slideAnimation = ({ animation, loadingStatus }) => { 2 | if (animation.name === 'slide') { 3 | if (animation.direction) { 4 | if (animation.direction === 'up' || animation.direction === 'down') { 5 | return `top: ${loadingStatus ? 0 : `${animation.direction === 'up' ? '-100%' : '100%'}`}; 6 | transition: 0.5s;`; 7 | } 8 | return `left: ${loadingStatus ? 0 : `${animation.direction === 'right' ? '100%' : '-101%'}`}; 9 | top: 0; 10 | transition: 0.5s;`; 11 | } 12 | return `top: ${loadingStatus ? 0 : '-100%'}; 13 | transition: 0.5s;`; 14 | } 15 | return `top: 0; 16 | left: 0;`; 17 | }; 18 | 19 | export const fadeAnimation = props => props.animation.name === 'fade' 20 | && ` opacity: ${props.loadingStatus ? 1 : 0}; 21 | visibility: ${props.loadingStatus ? 'visible' : 'hidden'}; 22 | transition: opacity 0.3s linear, visibility 0.2s linear 0.3s;`; 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /src/Sugar/SugarStyles.js: -------------------------------------------------------------------------------- 1 | import { css, keyframes } from 'styled-components'; 2 | 3 | const spinner = keyframes` 4 | 50% { 5 | border-radius: 50%; 6 | transform: scale(0.5) rotate(360deg); 7 | } 8 | 100% { 9 | transform: scale(1) rotate(720deg); 10 | } 11 | `; 12 | const shadow = keyframes` 13 | 50% { 14 | transform: scale(0.5); 15 | background-color: rgba(0, 0, 0, 0.1); 16 | } 17 | `; 18 | 19 | const SugarStyles = css` 20 | span { 21 | position: relative; 22 | } 23 | span:before, 24 | span:after { 25 | content: ''; 26 | position: relative; 27 | display: block; 28 | } 29 | span:before { 30 | animation: ${spinner} 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal; 31 | width: 50px; 32 | height: 50px; 33 | background-color: ${({ color }) => color}; 34 | } 35 | span:after { 36 | animation: ${shadow} 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal; 37 | bottom: -30px; 38 | height: 5px; 39 | border-radius: 50%; 40 | background-color: rgba(0, 0, 0, 0.2); 41 | } 42 | `; 43 | 44 | export default SugarStyles; 45 | -------------------------------------------------------------------------------- /src/Circle/CircleStyles.js: -------------------------------------------------------------------------------- 1 | import { keyframes, css } from 'styled-components'; 2 | 3 | const rotate = keyframes` 4 | 0% { 5 | transform: translate(-50%, -50%) rotate(0deg); 6 | } 7 | 100% { 8 | transform: translate(-50%, -50%) rotate(360deg); 9 | } 10 | `; 11 | const dash = keyframes` 12 | 0% { 13 | stroke-dasharray: 1, 200; 14 | stroke-dashoffset: 0; 15 | } 16 | 50% { 17 | stroke-dasharray: 89, 200; 18 | stroke-dashoffset: -35; 19 | } 20 | 100% { 21 | stroke-dasharray: 89, 200; 22 | stroke-dashoffset: -124; 23 | } 24 | `; 25 | 26 | const CircleStyles = css` 27 | animation: ${rotate} 2s linear infinite; 28 | height: 50px; 29 | left: 50%; 30 | position: absolute; 31 | top: 50%; 32 | transition: all 0.2s ease; 33 | transform: translate(-50%, -50%) rotate(360deg); 34 | width: 50px; 35 | z-index: 4; 36 | .path { 37 | stroke-dasharray: 1, 500; 38 | stroke-dashoffset: 0; 39 | animation: ${dash} 1.5s ease-in-out infinite, color 6s ease-in-out infinite; 40 | stroke-linecap: round; 41 | } 42 | `; 43 | 44 | export default CircleStyles; 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Gegham Samvelyan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/Cube/CubeStyles.js: -------------------------------------------------------------------------------- 1 | import { keyframes, css } from 'styled-components'; 2 | 3 | const loader = keyframes` { 4 | 0% { 5 | -webkit-transform: rotate(0deg); 6 | transform: rotate(0deg); 7 | } 8 | 25% { 9 | -webkit-transform: rotate(180deg); 10 | transform: rotate(180deg); 11 | } 12 | 50% { 13 | -webkit-transform: rotate(180deg); 14 | transform: rotate(180deg); 15 | } 16 | 75% { 17 | -webkit-transform: rotate(360deg); 18 | transform: rotate(360deg); 19 | } 20 | 100% { 21 | -webkit-transform: rotate(360deg); 22 | transform: rotate(360deg); 23 | } 24 | } 25 | `; 26 | const loaderInner = keyframes` { 27 | 0% { 28 | height: 0%; 29 | } 30 | 25% { 31 | height: 0%; 32 | } 33 | 50% { 34 | height: 100%; 35 | } 36 | 75% { 37 | height: 100%; 38 | } 39 | 100% { 40 | height: 0%; 41 | } 42 | } 43 | `; 44 | 45 | const CubeStyles = css` 46 | display: inline-block; 47 | width: 30px; 48 | height: 30px; 49 | border: 4px solid ${props => props.color}; 50 | animation: ${loader} 2s infinite ease; 51 | span { 52 | vertical-align: top; 53 | display: inline-block; 54 | width: 100%; 55 | background-color: ${props => props.color}; 56 | animation: ${loaderInner} 2s infinite ease-in; 57 | } 58 | `; 59 | 60 | export default CubeStyles; 61 | -------------------------------------------------------------------------------- /src/Circle2/Circle2Styles.js: -------------------------------------------------------------------------------- 1 | import { keyframes, css } from 'styled-components'; 2 | 3 | const rotate1 = keyframes` 4 | from { 5 | transform: rotate(0deg) scale(0.4, 0.4); 6 | } 7 | to { 8 | transform: rotate(360deg) scale(0.4, 0.4); 9 | } 10 | `; 11 | const rotate2 = keyframes` 12 | from { 13 | transform: rotate(0deg); 14 | } 15 | to { 16 | transform: rotate(-360deg); 17 | } 18 | `; 19 | const Circle2Styles = css` 20 | width: 200px; 21 | height: 200px; 22 | position: relative; 23 | border: 3px solid transparent; 24 | border-radius: 50%; 25 | border-top-color: ${props => props.color}; 26 | animation: ${rotate1} 0.6s cubic-bezier(0.44, 0.39, 0.32, 1.28) infinite; 27 | &:after, 28 | :before { 29 | content: ''; 30 | display: block; 31 | position: absolute; 32 | border: 3px solid transparent; 33 | border-radius: 50%; 34 | } 35 | &:before { 36 | animation: ${rotate2} 1s linear infinite; 37 | top: 20px; 38 | bottom: 20px; 39 | left: 20px; 40 | right: 20px; 41 | border-top-color: inherit; 42 | filter: brightness(150%); 43 | } 44 | &:after { 45 | animation: ${rotate2} 2s linear infinite; 46 | top: 43px; 47 | bottom: 43px; 48 | left: 43px; 49 | right: 43px; 50 | filter: brightness(180%); 51 | border-top-color: inherit; 52 | } 53 | `; 54 | 55 | export default Circle2Styles; 56 | -------------------------------------------------------------------------------- /src/Planets/PlanetsStyles.js: -------------------------------------------------------------------------------- 1 | import { css, keyframes } from 'styled-components'; 2 | 3 | const spin = keyframes` 4 | from { 5 | transform: rotate(0); 6 | } 7 | to{ 8 | transform: rotate(359deg); 9 | } 10 | `; 11 | 12 | const PlanetsStyles = css` 13 | width: 250px; 14 | height: 250px; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | .orbit { 19 | position: relative; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | border: 1px solid ${({ color }) => (color.split('')[0] === '#' ? `${color}4d` : color)}; 24 | border-radius: 50%; 25 | } 26 | 27 | .earth-orbit { 28 | width: 165px; 29 | height: 165px; 30 | animation: ${spin} 12s linear 0s infinite; 31 | } 32 | 33 | .venus-orbit { 34 | width: 120px; 35 | height: 120px; 36 | animation: ${spin} 7.4s linear 0s infinite; 37 | } 38 | 39 | .mercury-orbit { 40 | width: 90px; 41 | height: 90px; 42 | animation: ${spin} 3s linear 0s infinite; 43 | } 44 | 45 | .planet { 46 | position: absolute; 47 | top: -5px; 48 | width: 10px; 49 | height: 10px; 50 | border-radius: 50%; 51 | background-color: ${({ color }) => color}; 52 | } 53 | 54 | .sun { 55 | width: 35px; 56 | height: 35px; 57 | border-radius: 50%; 58 | background-color: #ffab91; 59 | } 60 | `; 61 | 62 | export default PlanetsStyles; 63 | -------------------------------------------------------------------------------- /src/Lines/LinesStyles.js: -------------------------------------------------------------------------------- 1 | import { keyframes, css } from 'styled-components'; 2 | 3 | const sequence1 = keyframes` 4 | 0% { 5 | height: 10px; 6 | } 7 | 50% { 8 | height: 50px; 9 | } 10 | 100% { 11 | height: 10px; 12 | } 13 | `; 14 | 15 | const sequence2 = keyframes` 16 | 0% { 17 | height: 20px; 18 | } 19 | 50% { 20 | height: 65px; 21 | } 22 | 100% { 23 | height: 20px; 24 | } 25 | `; 26 | const LinesStyles = css` 27 | margin: auto; 28 | left: 0; 29 | right: 0; 30 | top: 50%; 31 | width: 90px; 32 | ul { 33 | margin: 0; 34 | list-style: none; 35 | width: 90px; 36 | position: relative; 37 | padding: 0; 38 | height: 10px; 39 | li { 40 | position: absolute; 41 | width: 2px; 42 | height: 0; 43 | background: ${props => props.color}; 44 | bottom: 0; 45 | &:nth-child(1) { 46 | left: 0; 47 | animation: ${sequence1} 1s ease infinite 0; 48 | } 49 | &:nth-child(2) { 50 | left: 15px; 51 | animation: ${sequence2} 1s ease infinite 0.1s; 52 | } 53 | &:nth-child(3) { 54 | left: 30px; 55 | animation: ${sequence1} 1s ease-in-out infinite 0.2s; 56 | } 57 | &:nth-child(4) { 58 | left: 45px; 59 | animation: ${sequence2} 1s ease-in infinite 0.3s; 60 | } 61 | &:nth-child(5) { 62 | left: 60px; 63 | animation: ${sequence1} 1s ease-in-out infinite 0.4s; 64 | } 65 | &:nth-child(6) { 66 | left: 75px; 67 | animation: ${sequence2} 1s ease infinite 0.5s; 68 | } 69 | } 70 | } 71 | `; 72 | 73 | export default LinesStyles; 74 | -------------------------------------------------------------------------------- /demo/js/List.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import React, { Component } from 'react'; 3 | import { Circle, Zoom, Cube, Circle2, Lines, Dots, Ripple, Planets, Sugar } from 'react-preloaders'; 4 | import { CopyToClipboard } from 'react-copy-to-clipboard'; 5 | import { iosCopyOutline } from 'react-icons-kit/ionicons/iosCopyOutline'; 6 | import Icon from 'react-icons-kit'; 7 | 8 | const preloaders = [ 9 | { label: 'Dots', render: }, 10 | { label: 'Circle', render: }, 11 | { label: 'Zoom', render: }, 12 | { label: 'Cube', render: }, 13 | { label: 'Circle2', render: }, 14 | { label: 'Lines', render: }, 15 | { label: 'Ripple', render: }, 16 | { label: 'Planets', render: }, 17 | { label: 'Sugar', render: }, 18 | ]; 19 | export default class List extends Component { 20 | render() { 21 | return ( 22 |
23 |
    24 | {preloaders.map((item, key) => ( 25 |
  • 26 |

    {item.label}

    27 | {item.render} 28 |
    29 |

    30 | import {'{'} 31 | {item.label} 32 | {'}'} from 'react-preloaders'; 33 |

    34 | 35 | 36 | 37 |
    38 |
    • 39 | ))} 40 |
41 |
42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /demo/webpack/webpack.parts.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | /* eslint-enable */ 5 | require('dotenv').config(); 6 | 7 | const { TITLE } = process.env; 8 | 9 | const PATHS = require('./PATHS'); 10 | 11 | exports.setMode = mode => ({ 12 | mode, 13 | }); 14 | 15 | exports.sourceMaps = method => ({ 16 | devtool: method, 17 | }); 18 | 19 | exports.buildSetup = env => ({ 20 | plugins: [ 21 | new HtmlWebpackPlugin({ 22 | template: PATHS.TEMPLATE, 23 | filename: 'index.html', 24 | title: TITLE, 25 | inject: 'body', 26 | favicon: 'webpack/favicon.ico', 27 | minify: 28 | env === 'development' 29 | ? false 30 | : { 31 | removeAttributeQuotes: true, 32 | collapseWhitespace: true, 33 | html5: true, 34 | removeComments: true, 35 | removeEmptyAttributes: true, 36 | removeRedundantAttributes: true, 37 | useShortDoctype: true, 38 | removeStyleLinkTypeAttributes: true, 39 | keepClosingSlash: true, 40 | minifyJS: true, 41 | minifyCSS: true, 42 | minifyURLs: true, 43 | }, 44 | }), 45 | ], 46 | }); 47 | 48 | exports.extractSass = new ExtractTextPlugin({ 49 | filename: 'style.[hash].css', 50 | }); 51 | 52 | exports.styleLoader = options => ({ 53 | module: { 54 | rules: [ 55 | { 56 | test: /\.scss$/, 57 | use: options.use, 58 | }, 59 | ], 60 | }, 61 | }); 62 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "2.1.2", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "webpack-dev-server --config webpack/webpack.config.js --hot", 8 | "build": "webpack --config webpack/webpack.config.js", 9 | "deploy": "gh-pages -d dist" 10 | }, 11 | "devDependencies": { 12 | "@babel/core": "^7.4.5", 13 | "@babel/preset-env": "^7.4.5", 14 | "@babel/preset-react": "^7.0.0", 15 | "autoprefixer": "^8.2.0", 16 | "babel-core": "^7.0.0-bridge.0", 17 | "babel-eslint": "^8.2.2", 18 | "babel-loader": "^7.1.3", 19 | "babel-preset-es2015": "^6.24.1", 20 | "babel-preset-react": "^6.24.1", 21 | "babel-preset-stage-0": "^6.24.1", 22 | "clean-webpack-plugin": "^0.1.19", 23 | "css-loader": "^0.28.10", 24 | "eslint": "^4.18.2", 25 | "eslint-config-airbnb": "^16.1.0", 26 | "eslint-plugin-import": "^2.9.0", 27 | "eslint-plugin-jsx-a11y": "^6.0.3", 28 | "eslint-plugin-react": "^7.7.0", 29 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 30 | "html-webpack-plugin": "^3.0.4", 31 | "node-sass": "^4.9.0", 32 | "plop": "^1.9.1", 33 | "postcss-loader": "^2.1.3", 34 | "sass-loader": "^7.0.1", 35 | "style-loader": "^0.20.2", 36 | "webpack": "^4.1.0", 37 | "webpack-cli": "^2.0.10", 38 | "webpack-dev-server": "^3.1.11", 39 | "webpack-merge": "^4.1.2" 40 | }, 41 | "dependencies": { 42 | "dotenv": "^5.0.1", 43 | "gh-pages": "^1.1.0", 44 | "react": "^16.3.2", 45 | "react-copy-to-clipboard": "^5.0.1", 46 | "react-dom": "^16.3.2", 47 | "react-hot-loader": "^4.0.0", 48 | "react-icons-kit": "^1.1.3" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /examples/simple/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /demo/styles/normalize.scss: -------------------------------------------------------------------------------- 1 | a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | font: inherit; 6 | vertical-align: baseline; 7 | outline: 0 !important; 8 | text-rendering: optimizelegibility; } 9 | 10 | * { 11 | -webkit-text-size-adjust: auto !important; 12 | -webkit-tap-highlight-color: transparent !important; 13 | -webkit-tap-highlight-color: transparent !important; 14 | -webkit-touch-callout: none !important; } 15 | 16 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 17 | display: block; } 18 | 19 | a { 20 | border: 0; } 21 | 22 | html { 23 | overflow-x: hidden; } 24 | 25 | body { 26 | line-height: 1; 27 | word-wrap: break-word; } 28 | 29 | ol, ul { 30 | list-style: none; } 31 | 32 | blockquote, q { 33 | quotes: none; } 34 | 35 | blockquote:after, blockquote:before, q:after, q:before { 36 | content: ''; 37 | content: none; } 38 | 39 | table { 40 | border-collapse: collapse; 41 | border-spacing: 0; } 42 | 43 | input, .hello-form .form-footer button, .hello-form .form-footer .skip, textarea, button { 44 | outline: 0 !important; 45 | outline: none !important; 46 | -webkit-appearance: none; 47 | -webkit-border-radius: 0; 48 | -moz-border-radius: 0; 49 | -moz-appearance: none; 50 | appearance: none; 51 | border-radius: 0; } 52 | 53 | :focus { 54 | outline-color: transparent; 55 | outline-style: none; } 56 | 57 | *, :after, :before { 58 | -webkit-box-sizing: border-box; 59 | -moz-box-sizing: border-box; 60 | box-sizing: border-box; } 61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-preloaders", 3 | "version": "3.0.3", 4 | "description": "🌌Package for adding preloaders to your React apps", 5 | "main": "./lib/index.js", 6 | "module": "./lib/index.js", 7 | "author": "Gegham Samvelyan (VamOSGS)", 8 | "license": "MIT", 9 | "scripts": { 10 | "deploy": "cd ./demo && yarn deploy", 11 | "build": "webpack", 12 | "build:dev": "webpack --watch", 13 | "start:demo": "cd ./demo && yarn start", 14 | "lint": "eslint src", 15 | "lint_fix": "eslint src --fix", 16 | "test": "jest", 17 | "build:exp": "rm -rf lib && cross-env NODE_ENV=production ./node_modules/.bin/babel src/ --out-dir lib --ignore ./src/__test__" 18 | }, 19 | "jest": { 20 | "snapshotSerializers": [ 21 | "enzyme-to-json/serializer" 22 | ], 23 | "setupFiles": [ 24 | "./src/setupTests.js" 25 | ] 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/vamosgs/react-preloaders.git" 30 | }, 31 | "keywords": [ 32 | "react", 33 | "react-preloaders", 34 | "react-preloader", 35 | "preloader-package", 36 | "preload", 37 | "preloader", 38 | "loader", 39 | "react-component" 40 | ], 41 | "dependencies": { 42 | "prop-types": "^15.7.2", 43 | "react": "^16.8.6", 44 | "styled-components": "^5.0.0-beta.0" 45 | }, 46 | "homepage": "https://vamosgs.github.io/react-preloaders/", 47 | "devDependencies": { 48 | "@babel/cli": "^7.4.4", 49 | "@babel/core": "^7.4.5", 50 | "@babel/preset-env": "^7.4.5", 51 | "babel-core": "^7.0.0-bridge.0", 52 | "babel-eslint": "^10.0.1", 53 | "babel-loader": "^8.0.6", 54 | "babel-preset-react": "^6.24.1", 55 | "cross-env": "^5.2.0", 56 | "enzyme": "^3.10.0", 57 | "enzyme-adapter-react-16": "^1.14.0", 58 | "enzyme-to-json": "^3.3.5", 59 | "eslint": "^5.16.0", 60 | "eslint-config-airbnb": "^17.1.0", 61 | "eslint-plugin-import": "^2.17.3", 62 | "eslint-plugin-jest": "^22.6.4", 63 | "eslint-plugin-jsx-a11y": "^6.2.1", 64 | "eslint-plugin-react": "^7.11.0", 65 | "jest": "^24.8.0", 66 | "webpack": "^4.33.0", 67 | "webpack-cli": "^3.3.4" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /demo/webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const path = require('path'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | const production = require('./webpack.config.prod'); 5 | const development = require('./webpack.config.dev'); 6 | const PATHS = require('./PATHS'); 7 | require('dotenv').config(); 8 | 9 | const { ENV } = process.env; 10 | const pathsToClean = ['dist']; 11 | 12 | const cleanOptions = { 13 | root: path.resolve(), 14 | verbose: true, 15 | dry: false, 16 | }; 17 | const common = { 18 | entry: PATHS.APP, 19 | output: { 20 | path: PATHS.DIST, 21 | filename: 'app.bundle.[hash].js', 22 | chunkFilename: '[name].[chunkhash].js', 23 | }, 24 | resolve: { 25 | modules: ['node_modules', PATHS.SRC], 26 | extensions: ['.js', '.jsx', '.json', '.less'], 27 | alias: { 28 | react: path.resolve('./node_modules/react'), 29 | }, 30 | }, 31 | plugins: [new CleanWebpackPlugin(pathsToClean, cleanOptions)], 32 | optimization: { 33 | namedModules: true, 34 | splitChunks: { 35 | cacheGroups: { 36 | default: false, 37 | react: { 38 | test: /react/, 39 | name: 'react', 40 | minSize: 1, 41 | chunks: 'initial', 42 | reuseExistingChunk: true, 43 | }, 44 | vendor: { 45 | test: /node_modules\/(?!react)/, 46 | name: 'vendor', 47 | minChunks: 2, 48 | minSize: 1, 49 | chunks: 'initial', 50 | reuseExistingChunk: true, 51 | }, 52 | }, 53 | }, 54 | }, 55 | module: { 56 | rules: [ 57 | { 58 | test: /\.jsx?$/, 59 | loader: 'babel-loader', 60 | exclude: /node_modules/, 61 | }, 62 | { 63 | test: /\.css$/, 64 | use: ['style-loader', 'css-loader'], 65 | }, 66 | { 67 | test: /\.(png|woff|woff2|eot|ttf|svg)$/, 68 | use: [ 69 | { 70 | loader: 'url-loader', 71 | options: { 72 | limit: 100000, 73 | name: 'assets/[name].[ext]', 74 | }, 75 | }, 76 | ], 77 | }, 78 | ], 79 | }, 80 | }; 81 | 82 | module.exports = () => { 83 | const config = merge(common, ENV === 'DEV' ? development : production); 84 | return config; 85 | }; 86 | -------------------------------------------------------------------------------- /examples/simple/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/Preloader/StyledPreloader.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled from 'styled-components'; 4 | import PreloaderStyles from './PreloaderStyles'; 5 | 6 | const StyledPreloader = styled.div` 7 | ${PreloaderStyles} 8 | `; 9 | 10 | function Preloader({ 11 | children, background, color, time, customLoading, animation, 12 | }) { 13 | const [loading, setLoading] = useState(true); 14 | const childrenWithProp = React.Children.map(children, child => React.cloneElement(child, { 15 | color, 16 | })); 17 | const bodyScroll = () => { 18 | document.body.style.overflow = loading ? 'hidden' : null; 19 | document.body.style.height = loading ? '100%' : null; 20 | document.body.style.width = loading ? '100%' : null; 21 | document.body.style.position = loading ? 'fixed' : null; 22 | }; 23 | const generateAnimation = () => { 24 | const animate = animation && animation.split('-'); 25 | return { 26 | name: animate && animate[0], 27 | direction: animate && animate[1], 28 | }; 29 | }; 30 | const detectBg = () => { 31 | if (background === 'blur') { 32 | return 'rgba(94, 85, 85, 0.32941176470588235)'; 33 | } 34 | return background; 35 | }; 36 | 37 | bodyScroll(); 38 | useEffect(() => { 39 | if (customLoading === false) { 40 | setTimeout(() => { 41 | setLoading(false); 42 | }, time); 43 | } 44 | if (customLoading === undefined) { 45 | document.onreadystatechange = () => { 46 | if (document.readyState === 'complete') { 47 | setTimeout(() => { 48 | setLoading(false); 49 | }, time); 50 | } 51 | }; 52 | } 53 | }, [customLoading]); 54 | useEffect(() => { 55 | if (background === 'blur') { 56 | const nodes = Object.values( 57 | document.getElementById('preloader').parentNode.childNodes, 58 | ).filter(i => i.id !== 'preloader'); 59 | nodes.forEach((el) => { 60 | // eslint-disable-next-line no-param-reassign 61 | el.style.filter = loading ? 'blur(5px)' : 'blur(0px)'; 62 | }); 63 | } 64 | }, [loading]); 65 | 66 | return ( 67 | 73 | {childrenWithProp} 74 | 75 | ); 76 | } 77 | 78 | Preloader.propTypes = { 79 | time: PropTypes.number, 80 | background: PropTypes.string, 81 | color: PropTypes.string, 82 | animation: PropTypes.string, 83 | children: PropTypes.element, 84 | customLoading: PropTypes.bool, 85 | }; 86 | 87 | Preloader.defaultProps = { 88 | time: 1300, 89 | background: '#f7f7f7', 90 | color: '#2D2D2D', 91 | animation: 'fade', 92 | }; 93 | 94 | export default Preloader; 95 | -------------------------------------------------------------------------------- /examples/simple/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /examples/simple/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /demo/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import 'normalize'; 2 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 3 | @import url('https://fonts.googleapis.com/css?family=Inconsolata'); 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | .wrap { 8 | h1 { 9 | text-align: center; 10 | font-size: 4em; 11 | color: #f95759; 12 | padding: 20px; 13 | } 14 | .flex { 15 | width: 67vw; 16 | margin: auto; 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: center; 21 | .code { 22 | background-color: #f7f7f7; 23 | padding: 15px; 24 | line-height: 1.5; 25 | width: 63%; 26 | font-size: 16px; 27 | font-family: Inconsolata, sans-serif; 28 | text-align: center; 29 | a { 30 | color: #f95759; 31 | transition: 0.35s; 32 | margin: 0 5px; 33 | font-weight: bold; 34 | font-size: 17px; 35 | text-decoration: none; 36 | &:hover { 37 | color: #c34d4f; 38 | } 39 | } 40 | } 41 | .list { 42 | width: 100%; 43 | > ul { 44 | display: flex; 45 | flex-wrap: wrap; 46 | justify-content: center; 47 | width: 100%; 48 | box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.15); 49 | > li { 50 | width: 20vw; 51 | height: auto; 52 | position: relative; 53 | display: flex; 54 | flex-direction: column; 55 | z-index: 1000; 56 | h3 { 57 | padding: 20px; 58 | user-select: none; 59 | } 60 | .info { 61 | display: flex; 62 | justify-content: center; 63 | div { 64 | cursor: pointer; 65 | position: relative; 66 | margin-left: 5px; 67 | &:hover { 68 | &::before { 69 | top: 2px; 70 | opacity: 1; 71 | } 72 | svg { 73 | color: #f95759; 74 | } 75 | } 76 | &:active { 77 | svg { 78 | color: rgb(63, 63, 63); 79 | } 80 | } 81 | &::before { 82 | content: 'Copy!'; 83 | font-size: 12px; 84 | position: absolute; 85 | background: black; 86 | color: white; 87 | padding: 2px; 88 | border-radius: 2px; 89 | top: 10px; 90 | opacity: 0; 91 | transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 92 | } 93 | } 94 | p { 95 | line-height: 1.5; 96 | font-size: 16px; 97 | font-family: Inconsolata, sans-serif; 98 | padding: 15px 0; 99 | } 100 | bottom: 0; 101 | background-color: #fff; 102 | } 103 | 104 | font-size: 24px; 105 | text-align: center; 106 | background: #f7f7f7; 107 | color: #000; 108 | border: 2px solid #f95759; 109 | margin: 20px; 110 | overflow: hidden; 111 | &:nth-child(2) { 112 | position: relative; 113 | } 114 | #preloader { 115 | position: unset; 116 | width: 100%; 117 | height: 12vw; 118 | margin: auto; 119 | opacity: 1; 120 | visibility: visible; 121 | > div { 122 | position: unset; 123 | } 124 | } 125 | } 126 | } 127 | } 128 | } 129 | } 130 | } 131 | @media only screen and (max-width: 1720px) { 132 | body { 133 | .wrap { 134 | .flex { 135 | width: 74vw; 136 | .list { 137 | > ul { 138 | > li { 139 | .info { 140 | div { 141 | margin-left: 0; 142 | margin-right: 8px; 143 | } 144 | } 145 | } 146 | } 147 | } 148 | } 149 | } 150 | } 151 | } 152 | @media only screen and (max-width: 1024px) { 153 | body { 154 | .wrap { 155 | .flex { 156 | width: 90vw; 157 | .list { 158 | > ul { 159 | > li { 160 | width: 25vw; 161 | .info { 162 | p { 163 | font-size: 13px; 164 | } 165 | } 166 | #preloader { 167 | height: 125px; 168 | } 169 | } 170 | } 171 | } 172 | } 173 | } 174 | } 175 | } 176 | @media only screen and (max-width: 840px) { 177 | body { 178 | .wrap { 179 | .flex { 180 | width: 90vw; 181 | .list { 182 | > ul { 183 | > li { 184 | min-width: 38%; 185 | #preloader { 186 | height: 200px; 187 | } 188 | .info { 189 | flex-direction: column-reverse; 190 | div { 191 | margin: 10px 0 0 0; 192 | } 193 | } 194 | } 195 | } 196 | } 197 | } 198 | } 199 | } 200 | } 201 | @media only screen and (max-width: 620px) { 202 | body { 203 | .wrap { 204 | .flex { 205 | width: 90vw; 206 | .list { 207 | > ul { 208 | > li { 209 | min-width: 80%; 210 | #preloader { 211 | height: 60vw; 212 | } 213 | } 214 | } 215 | } 216 | } 217 | } 218 | } 219 | } 220 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | ## React Preloaders 2 | 3 | ![React Preloaders](https://raw.githubusercontent.com/VamOSGS/react-preloaders/development/assets/react-preloaders-card.jpg) 4 | 5 | ![npm](https://img.shields.io/npm/v/react-preloaders.svg?style=flat-square) 6 | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-preloaders.svg?style=flat-square) 7 | ![Travis (.org) branch](https://img.shields.io/travis/vamosgs/react-preloaders/development.svg?style=flat-square) 8 | [![npm downloads](https://img.shields.io/npm/dm/react-preloaders.svg?style=flat-square)](https://www.npmjs.org/package/react-preloaders) 9 | ![NPM](https://img.shields.io/npm/l/react-preloaders.svg?style=flat-square) 10 | #### [vamosgs.github.io/react-preloaders](https://vamosgs.github.io/react-preloaders/) 11 | 12 | ### Setup 13 | 14 | Install it: 15 | 16 | ```bash 17 | npm install react-preloaders --save 18 | ``` 19 | 20 | or 21 | 22 | ```bash 23 | yarn add react-preloaders --save 24 | ``` 25 | 26 | ### Get Started 27 | 28 | #### find full preloaders list [here](https://vamosgs.github.io/react-preloaders/). 29 | 30 | ### Simplest way 31 | 32 | ```jsx 33 | import React from 'react'; 34 | import { Lines } from 'react-preloaders'; 35 | 36 | function App() { 37 | return ( 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | ``` 45 | ### Your components as preloader 46 | Here is example how you can use your components as prelaoder: 47 | 48 | ```jsx 49 | import React from 'react'; 50 | import { CustomPreloader } from 'react-preloaders'; 51 | 52 | function App() { 53 | return ( 54 | 55 | 56 | 57 | YOUR CUSTOM PRELOADER COMPONENT 58 | 59 | 60 | ); 61 | } 62 | ``` 63 | 64 | ### Properties (Props) 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |
ProptypeDefault value
colorString(hex, rgb,...)#2D2D2D
backgroundString(blur, gradient...)#F7F7F7
timeNumber(Milliseconds)1300ms
animationString(fade, slide...)fade
customLoadingBooleanundefined
98 | 99 | ## color (String) 100 | 101 | Color (hex, rgb, rgba) defines preloaders main color. 102 | 103 | ```jsx 104 | import { Lines } from 'react-preloaders'; 105 | 106 | ; 107 | ; 108 | ``` 109 | 110 | ## background (String) 111 | 112 | Background can be just color (hex, rgb), gradient or blured. 113 | For just colored background pass color(hex, rgb, rgba). 114 | 115 | ```jsx 116 | import { Lines } from 'react-preloaders'; 117 | 118 | ; 119 | ``` 120 | 121 | For gradient background pass your gradient. 122 | 123 | You can generate gradients [here](https://cssgradient.io/). 124 | 125 | ```jsx 126 | import { Lines } from 'react-preloaders'; 127 | 128 | ; 129 | ``` 130 | 131 | For blured background just pass blur.(it's now in beta) 132 | 133 | ```jsx 134 | import { Lines } from 'react-preloaders'; 135 | 136 | ; 137 | ``` 138 | 139 | ## time (Number) 140 | 141 | Time defines how long you want show preloader after page loaded. 142 | 143 | ```jsx 144 | import { Lines } from 'react-preloaders'; 145 | 146 | ; 147 | ``` 148 | 149 | ### If your are using [customLoading](#customLoading) and you don't want play preloader if your loading status false you need to pass time 0 150 | 151 | ```jsx 152 | import { Lines } from 'react-preloaders'; 153 | 154 | ; 155 | ``` 156 | 157 | ## animation (String) 158 | 159 | Now you can choose preloader closing animation, in this version available just 2 animations fade and slide. 160 | By default preloader will close with fade animation. 161 | 162 | #### For slide animation you can choose direction. 163 | 164 | ```jsx 165 | import { Lines } from 'react-preloaders'; 166 | 167 | ; 168 | ; 169 | ; 170 | ; 171 | ``` 172 | 173 | ## customLoading (Boolean) 174 | 175 | If in your app somthing loads async you can use preloaders too. For customLoading you need to pass your loading status. 176 | 177 | ```jsx 178 | import React, { Component } from 'react'; 179 | import { Lines } from 'react-preloaders'; 180 | 181 | class App { 182 | constructor() { 183 | state = { 184 | loading: true 185 | }; 186 | } 187 | componentDidMount() { 188 | fetch('https://jsonplaceholder.typicode.com/todos/1') 189 | .then(response => response.json()) 190 | .then(json => { 191 | setState({ loading: false }); 192 | }) 193 | .catch(err => { 194 | setState({ loading: false }); 195 | }); 196 | } 197 | render() { 198 | return ( 199 | 200 | 201 | 202 | 203 | ); 204 | } 205 | } 206 | ``` 207 | 208 | ### Example with hooks 209 | 210 | ```jsx 211 | import React, { useState, useEffect } from 'react'; 212 | import { Lines } from 'react-preloaders'; 213 | 214 | function App() { 215 | const [loading, setLoading] = useState(true); 216 | 217 | useEffect(() => { 218 | fetch('https://jsonplaceholder.typicode.com/todos/1') 219 | .then(response => response.json()) 220 | .then(json => { 221 | setLoading(false); 222 | }) 223 | .catch(err => { 224 | setLoading(false); 225 | }); 226 | }, []); 227 | 228 | return ( 229 | 230 | 231 | 232 | 233 | ); 234 | } 235 | ``` 236 | 237 | #### CSS loading (under v3.x.x) methods for old versions 238 | 239 | Packages you need 240 | 241 | ```bash 242 | style-loader css-loader 243 | ``` 244 | 245 | more if you want to extract css you need 246 | 247 | #### Extract ( webpack 3.x ) 248 | 249 | ```bash 250 | extract-text-webpack-plugin 251 | ``` 252 | 253 | #### Extract ( webpack 4.x ) 254 | 255 | ```bash 256 | mini-css-extract-plugin 257 | ``` 258 | 259 | #### Add this to your webpack if you don't have css loader yet 260 | 261 | ```js 262 | { 263 | test: /\.css$/, 264 | use: [ 'style-loader', 'css-loader' ] 265 | } 266 | ``` 267 | 268 | #### Extract ( webpack 3.x ) 269 | 270 | ```js 271 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 272 | const extractCSS = new ExtractTextPlugin('style.[hash].css'); 273 | 274 | module.exports = { 275 | plugins: [extractCSS], 276 | module: { 277 | rules: [ 278 | { 279 | test: /\.css$/, 280 | use: extractCSS.extract(['css-loader', 'postcss-loader']) 281 | } 282 | ] 283 | } 284 | }; 285 | ``` 286 | 287 | #### Extract ( webpack 4.x ) 288 | 289 | ```js 290 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 291 | module.exports = { 292 | plugins: [ 293 | new MiniCssExtractPlugin({ 294 | // Options similar to the same options in webpackOptions.output 295 | // both options are optional 296 | filename: '[name].css', 297 | chunkFilename: '[id].css' 298 | }) 299 | ], 300 | module: { 301 | rules: [ 302 | { 303 | test: /\.css$/, 304 | use: [ 305 | { 306 | loader: MiniCssExtractPlugin.loader, 307 | options: { 308 | // you can specify a publicPath here 309 | // by default it use publicPath in webpackOptions.output 310 | publicPath: '../' 311 | } 312 | }, 313 | 'css-loader' 314 | ] 315 | } 316 | ] 317 | } 318 | }; 319 | ``` 320 | --------------------------------------------------------------------------------