mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-27 15:30:37 +05:30
Added loader on app initialization. Moved all css/js to the end of body
This commit is contained in:
SleepWalker
parent
f9ffd22a21
commit
8db3c36261
@ -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": "*",
|
||||
|
||||
12
src/components/ui/loader/loader.html
Normal file
12
src/components/ui/loader/loader.html
Normal 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>
|
||||
131
src/components/ui/loader/loader.scss
Normal file
131
src/components/ui/loader/loader.scss
Normal 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
19
src/first-render.js
Normal 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
28
src/index.ejs
Normal 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>
|
||||
@ -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>
|
||||
@ -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);
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
html,
|
||||
body,
|
||||
:global(.app) {
|
||||
.app {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user