Added loader on app initialization. Moved all css/js to the end of body

This commit is contained in:
SleepWalker 2016-05-08 14:26:25 +03:00
parent f9ffd22a21
commit 8db3c36261
9 changed files with 204 additions and 25 deletions

View File

@ -12,7 +12,7 @@
"up": "npm install",
"test": "karma start ./karma.conf.js",
"lint": "eslint ./src",
"build": "webpack --progress --colors -p"
"build": "rm -rf dist/ && webpack --progress --colors -p"
},
"dependencies": {
"babel-polyfill": "^6.3.14",
@ -54,7 +54,8 @@
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^0.9.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^1.7.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.0.0",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.4",
"karma": "*",

View File

@ -0,0 +1,12 @@
<div id="loader" class="loader-overlay">
<div class="loader">
<div class="loader__cube loader__cube--1"></div>
<div class="loader__cube loader__cube--2"></div>
<div class="loader__cube loader__cube--3"></div>
<div class="loader__cube loader__cube--4"></div>
<div class="loader__cube loader__cube--5"></div>
<div class="loader__cube loader__cube--6"></div>
<div class="loader__cube loader__cube--7"></div>
<div class="loader__cube loader__cube--8"></div>
</div>
</div>

View File

@ -0,0 +1,131 @@
.loader-overlay {
background: rgba(255, 255, 255, 0.3);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
visibility: hidden;
opacity: 0;
transition: 0.4s ease;
&.is-active {
opacity: 1;
visibility: visible;
transition: 0.05s ease;
}
}
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
width: 153px;
height: 153px;
&__cube {
position: absolute;
margin: -1px;
padding: 0;
width: 50px;
height: 50px;
background: rgba(35, 35, 35, 0.6);
display: inline-block;
animation-iteration-count: infinite;
animation-duration: .5s;
animation-timing-function: linear;
&--1 {
margin: 0 0 0 0;
animation-name: cube1;
}
&--2 {
margin: 0 0 0 051px;
animation-name: cube2;
}
&--3 {
margin: 0 0 0 102px;
animation-name: cube3;
}
&--4 {
margin: 51px 0 0 0;
animation-name: cube4;
}
&--5 {
margin: 051px 0 0 051px;
}
&--6 {
margin: 51px 0 0 102px;
animation-name: cube6;
}
&--7 {
margin: 102px 0 0 0;
animation-name: cube7;
}
&--8 {
margin: 102px 0 0 051px;
animation-name: cube8;
}
}
}
@keyframes cube1 {
25%{ margin: 0 0 0 0;}
50%{ margin: 0 0 0 51px;}
75%{ margin: 0 0 0 51px;}
100%{margin: 0 0 0 51px;}
}
@keyframes cube2 {
25%{ margin: 0 0 0 51px;}
50%{ margin: 0 0 0 102px;}
75%{ margin: 0 0 0 102px;}
100%{margin: 0 0 0 102px;}
}
@keyframes cube3 {
25%{ margin: 51px 0 0 102px;}
50%{ margin: 51px 0 0 102px;}
75%{ margin: 51px 0 0 102px;}
100%{margin: 51px 0 0 102px;}
}
@keyframes cube4 {
25%{ margin: 51px 0 0 0;}
50%{ margin: 51px 0 0 0;}
75%{ margin: 0 0 0 0;}
100%{margin: 0 0 0 0;}
}
@keyframes cube6 {
25%{ margin: 102px 0 0 102px;}
50%{ margin: 102px 0 0 102px;}
75%{ margin: 102px 0 0 102px;}
100%{margin: 102px 0 0 51px;}
}
@keyframes cube7 {
25%{ margin: 102px 0 0 0;}
50%{ margin: 102px 0 0 0;}
75%{ margin: 51px 0 0 0;}
100%{margin: 51px 0 0 0;}
}
@keyframes cube8 {
25%{ margin: 102px 0 0 51px;}
50%{ margin: 102px 0 0 51px;}
75%{ margin: 102px 0 0 51px;}
100%{margin: 102px 0 0 0;}
}

19
src/first-render.js Normal file
View File

@ -0,0 +1,19 @@
/**
* Returns the content to be displayed on first render
*/
export default `
${require('components/ui/loader/loader.html')}
<script>
(function(l) {
l.offsetHeight;
l.className += ' is-active';
}(document.getElementById('loader')));
</script>
<style>
${require('!!css!postcss!sass!index.scss')[0][1]}
${require('!!css!postcss!sass!components/ui/loader/loader.scss')[0][1]}
</style>
`;

28
src/index.ejs Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ely.by - Account</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<% if (htmlWebpackPlugin.files.favicon) { %>
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon %>">
<% } %>
</head>
<body>
<div id="app" class="app"></div>
<%= require('first-render').default %>
<link href="//fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet" type="text/css">
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
</body>
</html>

View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ely.by - Account</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link href="//fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app" class="app"></div>
</body>
</html>

View File

@ -20,8 +20,6 @@ import { IntlProvider } from 'react-intl';
import reducers from 'reducers';
import routesFactory from 'routes';
import 'index.scss';
const reducer = combineReducers({
...reducers,
routing: routeReducer
@ -50,3 +48,7 @@ ReactDOM.render(
</IntlProvider>,
document.getElementById('app')
);
setTimeout(() => {
document.getElementById('loader').classList.remove('is-active');
}, 50);

View File

@ -3,7 +3,7 @@
html,
body,
:global(.app) {
.app {
height: 100%;
margin: 0;
padding: 0;

View File

@ -118,11 +118,11 @@ var webpackConfig = {
__PROD__: isProduction
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
template: 'src/index.ejs',
favicon: 'src/favicon.ico',
hash: isProduction,
filename: 'index.html',
inject: 'body',
inject: false,
minify: {
collapseWhitespace: isProduction
}
@ -157,6 +157,10 @@ var webpackConfig = {
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'html'
}
]
},