├── demo.gif
├── .babelrc
├── .eslintrc
├── demo
├── index.html
├── server.js
├── index.js
└── demo-bundle.js
├── src
├── media.conf.js
├── components
│ ├── Text.js
│ └── Logo.js
└── index.js
├── webpack-demo.config.js
├── dist
├── media.conf.js
├── components
│ ├── ChildrenWrapper.js
│ ├── ContainerLogo.js
│ ├── Root.js
│ ├── Text.js
│ └── Logo.js
└── index.js
├── webpack-umd.config.js
├── package.json
└── README.md
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mslavan/react-loading-screen/HEAD/demo.gif
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [ "es2015", "react", "stage-0"],
3 | "plugins": []
4 | }
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "parser": "babel-eslint",
4 | "extends": "eslint:recommended",
5 | "env": {
6 | "es6": true,
7 | "node": true,
8 | "browser": true,
9 | },
10 | "parserOptions": {
11 | "ecmaFeatures": {
12 | "jsx": true
13 | }
14 | },
15 | "rules": {
16 | "consistent-this": 0,
17 | "no-console": 0
18 | }
19 | }
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Loading Screen EXAMPLE
6 |
7 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/media.conf.js:
--------------------------------------------------------------------------------
1 | import { css } from 'styled-components'
2 |
3 | const sizes = {
4 | largest: 10000,
5 | desktop: 992,
6 | tablet: 768,
7 | phone: 376
8 | }
9 |
10 | const media = Object.keys(sizes).reduce((acc, label) => {
11 | acc[label] = (...args) => css`
12 | @media (max-width: ${sizes[label] / 16}em) {
13 | ${css(...args)}
14 | }
15 | `
16 |
17 | return acc
18 | }, {})
19 |
20 | export default media
21 |
--------------------------------------------------------------------------------
/webpack-demo.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'cheap-module-eval-source-map',
6 | entry: [
7 | 'webpack-hot-middleware/client',
8 | 'babel-polyfill',
9 | './demo/index.js'
10 | ],
11 | output: {
12 | path: path.join(__dirname, 'demo'),
13 | filename: 'demo-bundle.js',
14 | },
15 | plugins: [
16 | new webpack.HotModuleReplacementPlugin(),
17 | new webpack.optimize.OccurrenceOrderPlugin(),
18 | new webpack.NoEmitOnErrorsPlugin(),
19 | ],
20 |
21 | module: {
22 | loaders: [
23 | { test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot-loader', 'babel-loader'] },
24 | { test: /\.css$/, loader: "style-loader!css-loader" },
25 | ],
26 | },
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/Text.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import styled from 'styled-components'
4 |
5 | import media from '../media.conf.js'
6 |
7 | const Title = styled.p`
8 | text-align: 'center';
9 | word-wrap: break-word;
10 | color: ${props => props.color ? props.color : '#676767'}
11 |
12 | ${media.largest`
13 | font-size: 30px;
14 | `}
15 |
16 | ${media.desktop`
17 | font-size: 22px;
18 | `}
19 |
20 | ${media.tablet`
21 | font-size: 20px;
22 | `}
23 |
24 | ${media.phone`
25 | font-size: 15px;
26 | `}
27 | `
28 |
29 | const propTypes = {
30 | text: PropTypes.string.isRequired,
31 | textColor: PropTypes.string,
32 | }
33 |
34 | function Text ({
35 | text,
36 | textColor
37 | }) {
38 |
39 | return (
40 | {text}
41 | )
42 | }
43 |
44 | Text.PropTypes = propTypes
45 |
46 | export default Text
47 |
--------------------------------------------------------------------------------
/dist/media.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _templateObject = _taggedTemplateLiteral(['\n @media (max-width: ', 'em) {\n ', '\n }\n '], ['\n @media (max-width: ', 'em) {\n ', '\n }\n ']);
8 |
9 | var _styledComponents = require('styled-components');
10 |
11 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12 |
13 | var sizes = {
14 | largest: 10000,
15 | desktop: 992,
16 | tablet: 768,
17 | phone: 376
18 | };
19 |
20 | var media = Object.keys(sizes).reduce(function (acc, label) {
21 | acc[label] = function () {
22 | return (0, _styledComponents.css)(_templateObject, sizes[label] / 16, _styledComponents.css.apply(undefined, arguments));
23 | };
24 |
25 | return acc;
26 | }, {});
27 |
28 | exports.default = media;
--------------------------------------------------------------------------------
/dist/components/ChildrenWrapper.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _react = require('react');
8 |
9 | var _react2 = _interopRequireDefault(_react);
10 |
11 | var _propTypes = require('prop-types');
12 |
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 |
15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16 |
17 | var propTypes = {
18 | text: _propTypes2.default.string.isRequired,
19 | children: _propTypes2.default.node
20 | };
21 |
22 | function ChildrenWrapper(_ref) {
23 | var loading = _ref.loading,
24 | children = _ref.children;
25 |
26 |
27 | var style = {
28 | display: loading ? "none" : "block"
29 | };
30 |
31 | return _react2.default.createElement(
32 | 'div',
33 | { style: style },
34 | children
35 | );
36 | }
37 |
38 | ChildrenWrapper.PropTypes = propTypes;
39 |
40 | exports.default = ChildrenWrapper;
--------------------------------------------------------------------------------
/src/components/Logo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import styled from 'styled-components'
4 |
5 | import media from '../media.conf.js'
6 |
7 | const Image = styled.img`
8 | margin-bottom: 20px;
9 | border-radius: ${props => props.rounded ? '10%' : '0px'};
10 |
11 | ${media.largest`
12 | width: 150px;
13 | max-height: 175px;
14 | `}
15 |
16 | ${media.desktop`
17 | width: 120px;
18 | max-height: 135px;
19 | `}
20 |
21 | ${media.tablet`
22 | width: 100px;
23 | max-height: 115px;
24 | `}
25 |
26 | ${media.phone`
27 | width: 80px;
28 | max-height: 90px;
29 | `}
30 | `
31 |
32 | const propTypes = {
33 | src: PropTypes.string.isRequired,
34 | rounded: PropTypes.bool
35 | }
36 |
37 | function Logo ({
38 | src,
39 | rounded
40 | }) {
41 | return (
42 |
45 | )
46 | }
47 |
48 | Logo.PropTypes = propTypes
49 |
50 | export default Logo
51 |
--------------------------------------------------------------------------------
/demo/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack')
2 | var webpackDevMiddleware = require('webpack-dev-middleware')
3 | var webpackHotMiddleware = require('webpack-hot-middleware')
4 | var { Server } = require('http');
5 | var express = require('express')
6 | var path = require('path')
7 |
8 | const port = process.env.PORT || 3000;
9 | const app = express()
10 | const server = Server(app)
11 |
12 | var webpackConfig = require('../webpack-demo.config.js');
13 | var compiler = webpack(webpackConfig);
14 |
15 | app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }))
16 | app.use(webpackHotMiddleware(compiler))
17 |
18 | app.get("*", function(req, res, next) {
19 | res.sendFile(__dirname + '/index.html')
20 | })
21 |
22 | server.listen(port,function(error) {
23 | if (error) {
24 | console.error(error)
25 | } else {
26 | console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port )
27 | }
28 | })
--------------------------------------------------------------------------------
/dist/components/ContainerLogo.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _react = require('react');
8 |
9 | var _react2 = _interopRequireDefault(_react);
10 |
11 | var _propTypes = require('prop-types');
12 |
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 |
15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16 |
17 | var propTypes = {
18 | loading: _propTypes2.default.bool.isRequired,
19 | children: _propTypes2.default.node.isRequired
20 | };
21 |
22 | function ContainerLogo(_ref) {
23 | var loading = _ref.loading,
24 | children = _ref.children;
25 |
26 |
27 | var style = {
28 | position: 'absolute',
29 | top: '50%',
30 | left: '50%',
31 | transform: 'translate(-50%, -50%)'
32 | };
33 |
34 | return _react2.default.createElement(
35 | 'div',
36 | { style: style },
37 | children
38 | );
39 | }
40 |
41 | ContainerLogo.PropTypes = propTypes;
42 |
43 | exports.default = ContainerLogo;
--------------------------------------------------------------------------------
/webpack-umd.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 |
4 | const plugins = [];
5 | if (process.env.MINIFY) {
6 | plugins.push(new webpack.optimize.UglifyJsPlugin());
7 | }
8 |
9 | const filename = (process.env.MINIFY)
10 | ? 'LoadingScreen.min.js'
11 | : 'LoadingScreen.js';
12 |
13 | module.exports = {
14 | entry: {
15 | AriaMenuButton: './src/index.js',
16 | },
17 | output: {
18 | library: 'LoadingScreen',
19 | libraryTarget: 'umd',
20 | path: path.join(__dirname, 'umd'),
21 | filename: filename,
22 | },
23 | externals: [
24 | {
25 | react: {
26 | root: 'React',
27 | commonjs2: 'react',
28 | commonjs: 'react',
29 | amd: 'react',
30 | },
31 | },
32 | {
33 | 'react-dom': {
34 | root: 'ReactDOM',
35 | commonjs2: 'react-dom',
36 | commonjs: 'react-dom',
37 | amd: 'react-dom',
38 | },
39 | },
40 | ],
41 | module: {
42 | loaders: [
43 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
44 | { test: /\.css$/, loader: "style-loader!css-loader" },
45 | ],
46 | },
47 | node: {
48 | Buffer: false,
49 | process: false,
50 | setImmediate: false,
51 | },
52 | plugins: plugins,
53 | };
54 |
--------------------------------------------------------------------------------
/dist/components/Root.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _react = require('react');
8 |
9 | var _react2 = _interopRequireDefault(_react);
10 |
11 | var _propTypes = require('prop-types');
12 |
13 | var _propTypes2 = _interopRequireDefault(_propTypes);
14 |
15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16 |
17 | var propTypes = {
18 | backgroundColor: _propTypes2.default.string,
19 | loading: _propTypes2.default.bool.isRequired
20 | };
21 |
22 | function Root(_ref) {
23 | var children = _ref.children,
24 | loading = _ref.loading,
25 | backgroundColor = _ref.backgroundColor;
26 |
27 |
28 | var style = {
29 | position: 'relative',
30 | textAlign: 'center',
31 | background: backgroundColor || '#efefef',
32 | width: '100%',
33 | height: '100%',
34 | zIndex: '9999999999',
35 |
36 | opacity: loading ? 1 : 0,
37 | WebkitTransition: 'opacity 0.2s ease-out',
38 | MozTransition: 'opacity 0.2s ease-out',
39 | MsTransition: 'opacity 0.2s ease-out',
40 | OTransition: 'opacity 0.2s ease-out'
41 | };
42 |
43 | return _react2.default.createElement(
44 | 'div',
45 | {
46 | style: style
47 | },
48 | children
49 | );
50 | }
51 |
52 | Root.PropTypes = propTypes;
53 |
54 | exports.default = Root;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-loading-screen",
3 | "version": "0.0.12",
4 | "description": "Loading screen example for react",
5 | "main": "dist/index.js",
6 | "scripts": {
7 | "start": "node ./demo/server.js",
8 | "build": "babel src -d dist"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/mslavan/react-loading-screen"
13 | },
14 | "keywords": [
15 | "react",
16 | "loading-screen"
17 | ],
18 | "author": "Slava Mikhailenko",
19 | "license": "MIT",
20 | "homepage": "https://github.com/mslavan/react-loading-screen",
21 | "peerDependencies": {
22 | "react": "^16.0.0 || ^15.0.0 || ^0.14.0"
23 | },
24 | "dependencies": {
25 | "react": "^15.5.4",
26 | "react-dom": "^15.6.2",
27 | "better-react-spinkit": "^2.0.4",
28 | "styled-components": "^3.2.6",
29 | "webpack": "^2.6.1"
30 | },
31 | "devDependencies": {
32 | "babel-core": "6.25.0",
33 | "babel-loader": "6.4.1",
34 | "babel-polyfill": "^6.23.0",
35 | "babel-preset-env": "^1.5.1",
36 | "babel-preset-es2015": "^6.24.1",
37 | "babel-preset-react": "6.24.1",
38 | "babel-preset-stage-0": "^6.3.13",
39 | "babel-preset-stage-2": "^6.24.1",
40 | "css-loader": "^0.28.7",
41 | "express": "^4.13.4",
42 | "http-server": "^0.10.0",
43 | "prop-types": "^15.6.0",
44 | "react-hot-loader": "1.3.1",
45 | "standard": "^8.6.0",
46 | "style-loader": "^0.18.2",
47 | "webpack-dev-middleware": "^1.12.2",
48 | "webpack-hot-middleware": "^2.21.0"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/demo/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 |
4 | import LoadingScreen from '../src'
5 |
6 | class Demo extends React.Component {
7 | constructor (props) {
8 | super(props)
9 |
10 | this.state = {
11 | loading: true
12 | }
13 | }
14 |
15 | componentDidMount () {
16 | // fake promise
17 | setTimeout(() =>
18 | this.setState({ loading: false })
19 | , 1500)
20 | }
21 |
22 | render () {
23 | const { loading } = this.state
24 |
25 | return (
26 |
34 |
35 |
react-screen-loading
36 |
Example of usage loading-screen, based on React
37 |
38 |
39 |
40 |
57 |
61 |
62 | {logoSrc &&
63 | }
66 |
67 | {loading && spinnerColor &&
68 | }
69 |
70 | {text &&
71 | }
74 |
75 |
76 |
77 |
78 |
79 | {children}
80 |
81 |
82 | )
83 | }
84 |
85 | LoadingScreen.propTypes = propTypes
86 |
87 | export default LoadingScreen
88 |
--------------------------------------------------------------------------------
/dist/components/Text.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _templateObject = _taggedTemplateLiteral(['\n text-align: \'center\';\n word-wrap: break-word;\n color: ', '\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n'], ['\n text-align: \'center\';\n word-wrap: break-word;\n color: ', '\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n']),
8 | _templateObject2 = _taggedTemplateLiteral(['\n font-size: 30px;\n '], ['\n font-size: 30px;\n ']),
9 | _templateObject3 = _taggedTemplateLiteral(['\n font-size: 22px;\n '], ['\n font-size: 22px;\n ']),
10 | _templateObject4 = _taggedTemplateLiteral(['\n font-size: 20px;\n '], ['\n font-size: 20px;\n ']),
11 | _templateObject5 = _taggedTemplateLiteral(['\n font-size: 15px;\n '], ['\n font-size: 15px;\n ']);
12 |
13 | var _react = require('react');
14 |
15 | var _react2 = _interopRequireDefault(_react);
16 |
17 | var _propTypes = require('prop-types');
18 |
19 | var _propTypes2 = _interopRequireDefault(_propTypes);
20 |
21 | var _styledComponents = require('styled-components');
22 |
23 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
24 |
25 | var _mediaConf = require('../media.conf.js');
26 |
27 | var _mediaConf2 = _interopRequireDefault(_mediaConf);
28 |
29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30 |
31 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
32 |
33 | var Title = _styledComponents2.default.p(_templateObject, function (props) {
34 | return props.color ? props.color : '#676767';
35 | }, _mediaConf2.default.largest(_templateObject2), _mediaConf2.default.desktop(_templateObject3), _mediaConf2.default.tablet(_templateObject4), _mediaConf2.default.phone(_templateObject5));
36 |
37 | var propTypes = {
38 | text: _propTypes2.default.string.isRequired,
39 | textColor: _propTypes2.default.string
40 | };
41 |
42 | function Text(_ref) {
43 | var text = _ref.text,
44 | textColor = _ref.textColor;
45 |
46 |
47 | return _react2.default.createElement(
48 | Title,
49 | { color: textColor },
50 | text
51 | );
52 | }
53 |
54 | Text.PropTypes = propTypes;
55 |
56 | exports.default = Text;
--------------------------------------------------------------------------------
/dist/components/Logo.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _templateObject = _taggedTemplateLiteral(['\n margin-bottom: 20px;\n border-radius: ', ';\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n'], ['\n margin-bottom: 20px;\n border-radius: ', ';\n\n ', '\n\n ', '\n\n ', '\n\n ', '\n']),
8 | _templateObject2 = _taggedTemplateLiteral(['\n width: 150px;\n max-height: 175px;\n '], ['\n width: 150px;\n max-height: 175px;\n ']),
9 | _templateObject3 = _taggedTemplateLiteral(['\n width: 120px;\n max-height: 135px;\n '], ['\n width: 120px;\n max-height: 135px;\n ']),
10 | _templateObject4 = _taggedTemplateLiteral(['\n width: 100px;\n max-height: 115px;\n '], ['\n width: 100px;\n max-height: 115px;\n ']),
11 | _templateObject5 = _taggedTemplateLiteral(['\n width: 80px;\n max-height: 90px;\n '], ['\n width: 80px;\n max-height: 90px;\n ']);
12 |
13 | var _react = require('react');
14 |
15 | var _react2 = _interopRequireDefault(_react);
16 |
17 | var _propTypes = require('prop-types');
18 |
19 | var _propTypes2 = _interopRequireDefault(_propTypes);
20 |
21 | var _styledComponents = require('styled-components');
22 |
23 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
24 |
25 | var _mediaConf = require('../media.conf.js');
26 |
27 | var _mediaConf2 = _interopRequireDefault(_mediaConf);
28 |
29 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30 |
31 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
32 |
33 | var Image = _styledComponents2.default.img(_templateObject, function (props) {
34 | return props.rounded ? '10%' : '0px';
35 | }, _mediaConf2.default.largest(_templateObject2), _mediaConf2.default.desktop(_templateObject3), _mediaConf2.default.tablet(_templateObject4), _mediaConf2.default.phone(_templateObject5));
36 |
37 | var propTypes = {
38 | src: _propTypes2.default.string.isRequired,
39 | rounded: _propTypes2.default.bool
40 | };
41 |
42 | function Logo(_ref) {
43 | var src = _ref.src,
44 | rounded = _ref.rounded;
45 |
46 | return _react2.default.createElement(Image, {
47 | rounded: true,
48 | src: src });
49 | }
50 |
51 | Logo.PropTypes = propTypes;
52 |
53 | exports.default = Logo;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-loading-screen
2 |
3 | A React loading screen. Сan be used as a screen saver for the initial download of the application or as an overload screen for promises.
4 |
5 | # DEMO
6 | 
7 | ## Installation
8 |
9 | ```
10 | npm install --save react-loading-screen
11 | ```
12 |
13 | The modular approach of this library means you're much better off building it into your code with a module bundling system like browserify or webpack.
14 |
15 | ## Browser Support
16 |
17 | Basically IE9+.
18 |
19 | ## Usage
20 |
21 | ```js
22 | const LoadingScreen = require('react-loading-screen');
23 | // ... or with es2015
24 | import LoadingScreen from 'react-loading-screen';
25 | ```
26 |
27 | ## Server side rendering
28 | Library uses [styled components](https://www.npmjs.com/package/styled-components), so follow official docs to configurate, it`s very simple, [go to instructions](https://www.styled-components.com/docs/advanced#server-side-rendering)
29 |
30 | ## Examples
31 |
32 | For details about why the examples work, read the API documentation below.
33 |
34 | You can also see full code of demo by looking in `example/`.
35 |
36 | ```js
37 | import React from 'react'
38 | //...
39 | import LoadingScreen from '../react-loading-screen'
40 |
41 | //...
42 |
50 | // ...
51 | // here loadable content
52 | // for example, async data
53 | //Loadable content
54 |
55 |
56 | ```
57 |
58 | ## API
59 |
60 | module is represented by a single component, let's call it LoadingScreen, import as shown above
61 |
62 |
63 | ### `LoadingScreen`
64 |
65 | Root component, it includes three subcomponents, you can control them through properties
66 |
67 | #### props
68 |
69 | some of props are **REQUIRED**, if not mentioned prop is OPTIONAL.
70 |
71 | **loading** { bool }: the content of the page is loaded or not (**required parameter**).
72 |
73 | **bgColor** { string }: background color of loading sreen. deault `#ffffff` .
74 |
75 | **spinnerColor** { string }: spinner color. If empty param - not showing.
76 |
77 | **textColor** { string }: text under spinner. default `#676767`.
78 |
79 | **logoSrc** { string }: url of image. If empty param - not showing.
80 |
81 | **text** { string }: background color of loading sreen. If empty param - not showing.
82 |
--------------------------------------------------------------------------------
/demo/demo-bundle.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // The module cache
3 | /******/ var installedModules = {};
4 | /******/
5 | /******/ // The require function
6 | /******/ function __webpack_require__(moduleId) {
7 | /******/
8 | /******/ // Check if module is in cache
9 | /******/ if(installedModules[moduleId]) {
10 | /******/ return installedModules[moduleId].exports;
11 | /******/ }
12 | /******/ // Create a new module (and put it into the cache)
13 | /******/ var module = installedModules[moduleId] = {
14 | /******/ i: moduleId,
15 | /******/ l: false,
16 | /******/ exports: {}
17 | /******/ };
18 | /******/
19 | /******/ // Execute the module function
20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 | /******/
22 | /******/ // Flag the module as loaded
23 | /******/ module.l = true;
24 | /******/
25 | /******/ // Return the exports of the module
26 | /******/ return module.exports;
27 | /******/ }
28 | /******/
29 | /******/
30 | /******/ // expose the modules object (__webpack_modules__)
31 | /******/ __webpack_require__.m = modules;
32 | /******/
33 | /******/ // expose the module cache
34 | /******/ __webpack_require__.c = installedModules;
35 | /******/
36 | /******/ // define getter function for harmony exports
37 | /******/ __webpack_require__.d = function(exports, name, getter) {
38 | /******/ if(!__webpack_require__.o(exports, name)) {
39 | /******/ Object.defineProperty(exports, name, {
40 | /******/ configurable: false,
41 | /******/ enumerable: true,
42 | /******/ get: getter
43 | /******/ });
44 | /******/ }
45 | /******/ };
46 | /******/
47 | /******/ // getDefaultExport function for compatibility with non-harmony modules
48 | /******/ __webpack_require__.n = function(module) {
49 | /******/ var getter = module && module.__esModule ?
50 | /******/ function getDefault() { return module['default']; } :
51 | /******/ function getModuleExports() { return module; };
52 | /******/ __webpack_require__.d(getter, 'a', getter);
53 | /******/ return getter;
54 | /******/ };
55 | /******/
56 | /******/ // Object.prototype.hasOwnProperty.call
57 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58 | /******/
59 | /******/ // __webpack_public_path__
60 | /******/ __webpack_require__.p = "";
61 | /******/
62 | /******/ // Load entry module and return exports
63 | /******/ return __webpack_require__(__webpack_require__.s = 15);
64 | /******/ })
65 | /************************************************************************/
66 | /******/ ({
67 |
68 | /***/ 15:
69 | /***/ (function(module, exports) {
70 |
71 | throw new Error("Module build failed: SyntaxError: /home/slava-alenka/loading-screen/package.json: Error while parsing JSON - Unexpected token } in JSON at position 193\n at JSON.parse ()\n at ConfigChainBuilder.addConfig (/home/slava-alenka/loading-screen/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:150:65)\n at ConfigChainBuilder.findConfigs (/home/slava-alenka/loading-screen/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:102:30)\n at buildConfigChain (/home/slava-alenka/loading-screen/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:61:13)\n at OptionManager.init (/home/slava-alenka/loading-screen/node_modules/babel-core/lib/transformation/file/options/option-manager.js:354:58)\n at File.initOptions (/home/slava-alenka/loading-screen/node_modules/babel-core/lib/transformation/file/index.js:212:65)\n at new File (/home/slava-alenka/loading-screen/node_modules/babel-core/lib/transformation/file/index.js:135:24)\n at Pipeline.transform (/home/slava-alenka/loading-screen/node_modules/babel-core/lib/transformation/pipeline.js:46:16)\n at transpile (/home/slava-alenka/loading-screen/node_modules/babel-loader/lib/index.js:50:20)\n at Object.module.exports (/home/slava-alenka/loading-screen/node_modules/babel-loader/lib/index.js:175:20)");
72 |
73 | /***/ })
74 |
75 | /******/ });
--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _templateObject = _taggedTemplateLiteral(['\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n background: ', ';\n opacity: ', ';\n visibility: ', ';\n transition: opacity 0.4s, visibility -0.3s linear 0.5s;\n'], ['\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n background: ', ';\n opacity: ', ';\n visibility: ', ';\n transition: opacity 0.4s, visibility -0.3s linear 0.5s;\n']),
8 | _templateObject2 = _taggedTemplateLiteral(['\n position: absolute;\n top: 50%;\n left: 50%;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translate(-50%, -50%);\n'], ['\n position: absolute;\n top: 50%;\n left: 50%;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: translate(-50%, -50%);\n']),
9 | _templateObject3 = _taggedTemplateLiteral(['\n display: ', ';\n'], ['\n display: ', ';\n']);
10 |
11 | var _react = require('react');
12 |
13 | var _react2 = _interopRequireDefault(_react);
14 |
15 | var _propTypes = require('prop-types');
16 |
17 | var _propTypes2 = _interopRequireDefault(_propTypes);
18 |
19 | var _styledComponents = require('styled-components');
20 |
21 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
22 |
23 | var _betterReactSpinkit = require('better-react-spinkit');
24 |
25 | var _Logo = require('./components/Logo');
26 |
27 | var _Logo2 = _interopRequireDefault(_Logo);
28 |
29 | var _Text = require('./components/Text');
30 |
31 | var _Text2 = _interopRequireDefault(_Text);
32 |
33 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
34 |
35 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
36 |
37 | var ScreenWrapper = _styledComponents2.default.div(_templateObject, function (props) {
38 | return props.bgColor || '#ffffff';
39 | }, function (props) {
40 | return props.loading ? 1 : 0;
41 | }, function (props) {
42 | return props.loading ? 'visible' : 'hidden';
43 | });
44 | var LoadingComponents = _styledComponents2.default.div(_templateObject2);
45 | var LoadableData = _styledComponents2.default.div(_templateObject3, function (props) {
46 | return props.loading ? 'none' : 'block';
47 | });
48 |
49 | var propTypes = {
50 | children: _propTypes2.default.node.isRequired,
51 | bgColor: _propTypes2.default.string,
52 | spinnerColor: _propTypes2.default.string,
53 | textColor: _propTypes2.default.string,
54 | loading: _propTypes2.default.bool.isRequired,
55 | logoSrc: _propTypes2.default.string,
56 | text: _propTypes2.default.string
57 | };
58 |
59 | function LoadingScreen(_ref) {
60 | var children = _ref.children,
61 | bgColor = _ref.bgColor,
62 | spinnerColor = _ref.spinnerColor,
63 | textColor = _ref.textColor,
64 | loading = _ref.loading,
65 | logoSrc = _ref.logoSrc,
66 | logoRounded = _ref.logoRounded,
67 | text = _ref.text,
68 | textStyle = _ref.textStyle;
69 |
70 | return _react2.default.createElement(
71 | 'div',
72 | null,
73 | _react2.default.createElement(
74 | ScreenWrapper,
75 | {
76 | bgColor: bgColor,
77 | loading: loading
78 | },
79 | _react2.default.createElement(
80 | LoadingComponents,
81 | null,
82 | logoSrc && _react2.default.createElement(_Logo2.default, {
83 | src: logoSrc,
84 | rounded: logoRounded }),
85 | loading && spinnerColor && _react2.default.createElement(_betterReactSpinkit.ThreeBounce, { size: 15, color: spinnerColor }),
86 | text && _react2.default.createElement(_Text2.default, {
87 | text: text,
88 | textColor: textColor })
89 | )
90 | ),
91 | _react2.default.createElement(
92 | LoadableData,
93 | { loading: loading },
94 | children
95 | )
96 | );
97 | }
98 |
99 | LoadingScreen.propTypes = propTypes;
100 |
101 | exports.default = LoadingScreen;
--------------------------------------------------------------------------------