Skip to content
GitLab
Commit 6267c14b authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add loading icon on index.html (Resolves #21)

parent 171c4d2a
Hide whitespace changes
Inline Side-by-side
.stylelintrc
View file @ 6267c14b
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
"selector-list-comma-newline-before": "never-multi-line", "selector-list-comma-newline-before": "never-multi-line",
"selector-list-comma-space-after": "never", "selector-list-comma-space-after": "never",
"selector-list-comma-space-before": "never", "selector-list-comma-space-before": "never",
"rule-empty-line-before": ["always", { "rule-empty-line-before": ["always-multi-line", {
"except": ["after-single-line-comment", "first-nested"] "except": ["after-single-line-comment", "first-nested"]
}], }],
"media-feature-colon-space-after": "always", "media-feature-colon-space-after": "always",
......
package.json
View file @ 6267c14b
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"build": "webpack -p --config webpack.config.prod.js", "build": "webpack -p --config webpack.config.prod.js",
"server": "webpack-dev-server --hot --inline", "server": "webpack-dev-server --hot --inline",
"lint": "npm run eslint && npm run stylelint", "lint": "npm run eslint && npm run stylelint",
"eslint": "eslint src/**", "eslint": "eslint src/*.js src/**/*.js",
"stylelint": "stylelint 'src/**/*.less' --synthax less", "stylelint": "stylelint 'src/**/*.less' --synthax less",
"format": "prettier --write '**/*.{js,jsx}'" "format": "prettier --write '**/*.{js,jsx}'"
}, },
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
"eslint-plugin-prettier": "^2.6.0", "eslint-plugin-prettier": "^2.6.0",
"favicons-webpack-plugin": "0.0.9", "favicons-webpack-plugin": "0.0.9",
"file-loader": "^1.1.11", "file-loader": "^1.1.11",
"html-webpack-inline-svg-plugin": "^1.2.4",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"less": "^3.0.4", "less": "^3.0.4",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
......
src/index.html 0 → 100644
View file @ 6267c14b
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes popup {
from { opacity: 0; }
90% { opacity: 0; }
to { opacity: 100%; }
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.loader {
position: relative;
height: 100%;
width: 100%;
animation-name: popup;
animation-duration: 1000ms;
}
.loader img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation-name: spin;
animation-duration: 2500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
</style>
</head>
<body>
<div class="loader">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWw6c3BhY2U9InByZXNlcnZlIiAgIGlkPSJzdmcyIiAgIGhlaWdodD0iODAuMDU2NjI1IiAgIHdpZHRoPSI4MS4wNTk1MDIiICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTgiPjxyZGY6UkRGPjxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcyAgICAgaWQ9ImRlZnM2Ij48Y2xpcFBhdGggICAgICAgaWQ9ImNsaXBQYXRoMTgiPjxwYXRoICAgICAgICAgaWQ9InBhdGgyMCIgICAgICAgICBkPSJtIDAsODQ5LjU2MyAxOTYwLjUyLDAgTCAxOTYwLjUyLDAgMCwwIDAsODQ5LjU2MyB6IiAvPjwvY2xpcFBhdGg+PC9kZWZzPjxnICAgICBpZD0iZzEwIiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNSwwLDAsLTEuMjUsLTE2LjM0NTI1LDkyLjk2OTI1KSI+PGcgICAgICAgaWQ9ImcxMiIgICAgICAgdHJhbnNmb3JtPSJzY2FsZSgwLjEsMC4xKSI+PGcgICAgICAgICBpZD0iZzE2IiAgICAgICAgIGNsaXAtcGF0aD0idXJsKCNjbGlwUGF0aDE4KSI+PHBhdGggICAgICAgICAgIHN0eWxlPSJmaWxsOiNmMDNkMzA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiICAgICAgICAgICBpZD0icGF0aDMwIiAgICAgICAgICAgZD0ibSA1NjYuMDEyLDM0Mi44ODMgYyAtNDQuNDUzLC02MS4xODQgLTEzMC4zODMsLTc0Ljc5NyAtMTkxLjU2MywtMzAuMzQ0IC0zLjk2OSwyLjg5MSAtNy43MTksNS45NTcgLTExLjI4OSw5LjE4IGwgNDEuMTkyLDI5LjkyMiA0MC45NDUsLTU2LjM3NSA1MS4zNTEsMTE3LjcwNyAzNy42ODQsLTUxLjg0OCA0NC43MjcsMzIuNSAtNDAuMzg3LDU1LjU5OCA0MS40NjksMzAuMTMyIGMgMTkuMjU3LC00My4zMiAxNS42NzksLTk1LjQzNyAtMTQuMTI5LC0xMzYuNDcyIG0gLTIzNS41MDQsMjMuNDY1IGMgLTE5Ljg4Nyw0My41NTQgLTE2LjUsOTYuMzIgMTMuNjAxLDEzNy43NSA0NC40NSw2MS4xNzkgMTMwLjM4Myw3NC43ODkgMTkxLjU1OSwzMC4zMzYgNC4zNTIsLTMuMTYxIDguMzkxLC02LjU3OSAxMi4yNTQsLTEwLjEyNSBsIC00MS43NjIsLTMwLjM0NCAtNDAuNTU4LDU1LjgyIC00NC43MzUsLTMyLjUgNDAuNTYzLC01NS44MjggLTAuMDY3LC0wLjA1MSAtMTI3LjcyNiwtMTIuNDQ5IDM4LjIwMywtNTIuNTc4IC00MS4zMzIsLTMwLjAzMSB6IG0gMzY2LjUyMywyNC42NjggYyAxLjQxLDEwLjY0NCAyLjIwNywyMS40OCAyLjIwNywzMi41MTEgMCwxMS4wMjggLTAuNzk3LDIxLjg2IC0yLjIwNywzMi41MDggbCAtNTcuNDY4LDguOTIyIGMgLTIuNTcxLDExLjQ2OSAtNi4xOTYsMjIuNzExIC0xMC44NjQsMzMuNTcgbCA0MS4yMTEsNDAuOTYxIGMgLTUuMTA5LDkuNDM4IC0xMC44MjgsMTguNjc2IC0xNy4zMTIsMjcuNTk4IC02LjQ4MSw4LjkyMiAtMTMuNDk2LDE3LjIyMyAtMjAuODk5LDI1IGwgLTUxLjY3OSwtMjYuNTIgYyAtNC4zNzIsMy44NCAtOC45Myw3LjUzMiAtMTMuNzMxLDExLjAyIC00Ljg0LDMuNTEyIC05LjgwMSw2LjczIC0xNC44NCw5LjcxOSBsIDkuMjU4LDU3LjM1MSBjIC05LjY3Niw0LjY0MSAtMTkuNzM0LDguNzUgLTMwLjIzOCwxMi4xNiAtMTAuNDgxLDMuNDA3IC0yMS4wMzksNS45OTMgLTMxLjU4Niw3LjkzOCBsIC0yNi4yNjIsLTUxLjkxOCBjIC0xMS43NDIsMS4wNyAtMjMuNTE5LDEuMDMxIC0zNS4xOTksLTAuMDY2IGwgLTI2LjI5Myw1MS45ODQgYyAtMTAuNTU5LC0xLjk0NSAtMjEuMTA5LC00LjUzMSAtMzEuNTk4LC03LjkzOCAtMTAuNDkyLC0zLjQxIC0yMC41NTEsLTcuNTE5IC0zMC4yMywtMTIuMTQ4IGwgOS4yNjksLTU3LjQzNCBjIC0xMC4wMzksLTUuOTI1IC0xOS41ODIsLTEyLjg1OSAtMjguNTExLC0yMC43MDcgbCAtNTEuNzQ2LDI2LjU1OSBjIC03LjQwNywtNy43NzcgLTE0LjQyMiwtMTYuMDcgLTIwLjkwMywtMjUgLTYuNDkyLC04LjkyMiAtMTIuMjExLC0xOC4xNiAtMTcuMzIsLTI3LjU5OCBsIDQxLjI1OCwtNDEuMDExIGMgLTQuNzE1LC0xMC45MjIgLTguMzYsLTIyLjEzNyAtMTAuODg3LC0zMy41MTIgbCAtNTcuNDgxLC04LjkzIGMgLTEuNDIxLC0xMC42NCAtMi4yMTgsLTIxLjQ4IC0yLjIxOCwtMzIuNTA4IDAsLTExLjAzMSAwLjc5NywtMjEuODU1IDIuMjE4LC0zMi41MTEgbCA1Ny41NjMsLTguOTM0IGMgMi41NTksLTExLjQ0NSA2LjE2OCwtMjIuNjY4IDEwLjgyLC0zMy40OTYgTCAyNDAuMDksMzA3LjU3IGMgNS4xMDksLTkuNDQ1IDEwLjgyOCwtMTguNjgzIDE3LjMyLC0yNy41OTcgNi40ODEsLTguOTI2IDEzLjQ4OCwtMTcuMjI3IDIwLjkwMywtMjUgbCA1MS42NzUsMjYuNTIzIGMgNC40MSwtMy44NjcgOSwtNy41OSAxMy44NCwtMTEuMTA1IDQuODAxLC0zLjQ4NSA5LjcyMywtNi42ODggMTQuNzIzLC05LjY1NyBsIC05LjI1OCwtNTcuMzM2IGMgOS42ODcsLTQuNjM2IDE5Ljc0NiwtOC43NSAzMC4yMzgsLTEyLjE1NiAxMC40ODksLTMuNDE4IDIxLjAzOSwtNS45OTYgMzEuNTk4LC03LjkyOSBsIDI2LjIxOSw1MS44NDMgYyAxMS43NzMsLTEuMDkzIDIzLjU3LC0xLjA2MiAzNS4yODUsMC4wMzkgbCAyNi4yMzgsLTUxLjg5NCBjIDEwLjU1OSwxLjk0NSAyMS4xMTcsNC41MjMgMzEuNTk4LDcuOTQxIDEwLjUwNCwzLjQwNiAyMC41NTEsNy41MiAzMC4yMzgsMTIuMTQ5IGwgLTkuMjQ2LDU3LjI4NSBjIDEwLjA3OCw1Ljk1NyAxOS42NDgsMTIuODk4IDI4LjYxNywyMC43ODkgbCA1MS42MjEsLTI2LjQ5MiBjIDcuNDAzLDcuNzczIDE0LjQxLDE2LjA3NCAyMC44OTksMjUgNi40ODQsOC45MTQgMTIuMjAzLDE4LjE1MiAxNy4zMTIsMjcuNTk3IGwgLTQxLjE0OCw0MC45MDcgYyA0LjczLDEwLjk1NyA4LjM3OSwyMi4yMDcgMTAuOTI5LDMzLjY0NCBsIDU3LjM0LDguODk1IiAvPjwvZz48L2c+PC9nPjwvc3ZnPg==" />
</div>
</body>
</html>
webpack.config.js
View file @ 6267c14b
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
const config = { const config = {
context: `${__dirname}/src`, // `__dirname` is root of project and `src` is source context: `${__dirname}/src`, // `__dirname` is root of project and `src` is source
...@@ -158,8 +159,10 @@ const config = { ...@@ -158,8 +159,10 @@ const config = {
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
title: 'AMIV an der ETH', title: 'AMIV an der ETH',
filename: 'index.html', filename: 'index.html',
template: 'index.html',
hash: true, hash: true,
}), }),
new HtmlWebpackInlineSVGPlugin(),
], ],
}; };
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment