Commit 2fc2328a authored by Marco Di Nardo's avatar Marco Di Nardo Committed by Sandro Lutz
Browse files

Improve Loading Screen Animation

parent 07898ff0
<!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); }
}
<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%; }
}
@keyframes popup {
from {
opacity: 0;
}
90% {
opacity: 0;
}
to {
opacity: 100%;
}
}
html,body {
height: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
.loader {
position: relative;
height: 100%;
width: 100%;
animation-name: popup;
animation-duration: 1000ms;
}
.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>
.loader img {
width: 96px;
height: 96px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="loader">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWw6c3BhY2U9InByZXNlcnZlIiAgIGlkPSJzdmcyIiAgIGhlaWdodD0iODAuMDU2NjI1IiAgIHdpZHRoPSI4MS4wNTk1MDIiICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTgiPjxyZGY6UkRGPjxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcyAgICAgaWQ9ImRlZnM2Ij48Y2xpcFBhdGggICAgICAgaWQ9ImNsaXBQYXRoMTgiPjxwYXRoICAgICAgICAgaWQ9InBhdGgyMCIgICAgICAgICBkPSJtIDAsODQ5LjU2MyAxOTYwLjUyLDAgTCAxOTYwLjUyLDAgMCwwIDAsODQ5LjU2MyB6IiAvPjwvY2xpcFBhdGg+PC9kZWZzPjxnICAgICBpZD0iZzEwIiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4yNSwwLDAsLTEuMjUsLTE2LjM0NTI1LDkyLjk2OTI1KSI+PGcgICAgICAgaWQ9ImcxMiIgICAgICAgdHJhbnNmb3JtPSJzY2FsZSgwLjEsMC4xKSI+PGcgICAgICAgICBpZD0iZzE2IiAgICAgICAgIGNsaXAtcGF0aD0idXJsKCNjbGlwUGF0aDE4KSI+PHBhdGggICAgICAgICAgIHN0eWxlPSJmaWxsOiNmMDNkMzA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiICAgICAgICAgICBpZD0icGF0aDMwIiAgICAgICAgICAgZD0ibSA1NjYuMDEyLDM0Mi44ODMgYyAtNDQuNDUzLC02MS4xODQgLTEzMC4zODMsLTc0Ljc5NyAtMTkxLjU2MywtMzAuMzQ0IC0zLjk2OSwyLjg5MSAtNy43MTksNS45NTcgLTExLjI4OSw5LjE4IGwgNDEuMTkyLDI5LjkyMiA0MC45NDUsLTU2LjM3NSA1MS4zNTEsMTE3LjcwNyAzNy42ODQsLTUxLjg0OCA0NC43MjcsMzIuNSAtNDAuMzg3LDU1LjU5OCA0MS40NjksMzAuMTMyIGMgMTkuMjU3LC00My4zMiAxNS42NzksLTk1LjQzNyAtMTQuMTI5LC0xMzYuNDcyIG0gLTIzNS41MDQsMjMuNDY1IGMgLTE5Ljg4Nyw0My41NTQgLTE2LjUsOTYuMzIgMTMuNjAxLDEzNy43NSA0NC40NSw2MS4xNzkgMTMwLjM4Myw3NC43ODkgMTkxLjU1OSwzMC4zMzYgNC4zNTIsLTMuMTYxIDguMzkxLC02LjU3OSAxMi4yNTQsLTEwLjEyNSBsIC00MS43NjIsLTMwLjM0NCAtNDAuNTU4LDU1LjgyIC00NC43MzUsLTMyLjUgNDAuNTYzLC01NS44MjggLTAuMDY3LC0wLjA1MSAtMTI3LjcyNiwtMTIuNDQ5IDM4LjIwMywtNTIuNTc4IC00MS4zMzIsLTMwLjAzMSB6IG0gMzY2LjUyMywyNC42NjggYyAxLjQxLDEwLjY0NCAyLjIwNywyMS40OCAyLjIwNywzMi41MTEgMCwxMS4wMjggLTAuNzk3LDIxLjg2IC0yLjIwNywzMi41MDggbCAtNTcuNDY4LDguOTIyIGMgLTIuNTcxLDExLjQ2OSAtNi4xOTYsMjIuNzExIC0xMC44NjQsMzMuNTcgbCA0MS4yMTEsNDAuOTYxIGMgLTUuMTA5LDkuNDM4IC0xMC44MjgsMTguNjc2IC0xNy4zMTIsMjcuNTk4IC02LjQ4MSw4LjkyMiAtMTMuNDk2LDE3LjIyMyAtMjAuODk5LDI1IGwgLTUxLjY3OSwtMjYuNTIgYyAtNC4zNzIsMy44NCAtOC45Myw3LjUzMiAtMTMuNzMxLDExLjAyIC00Ljg0LDMuNTEyIC05LjgwMSw2LjczIC0xNC44NCw5LjcxOSBsIDkuMjU4LDU3LjM1MSBjIC05LjY3Niw0LjY0MSAtMTkuNzM0LDguNzUgLTMwLjIzOCwxMi4xNiAtMTAuNDgxLDMuNDA3IC0yMS4wMzksNS45OTMgLTMxLjU4Niw3LjkzOCBsIC0yNi4yNjIsLTUxLjkxOCBjIC0xMS43NDIsMS4wNyAtMjMuNTE5LDEuMDMxIC0zNS4xOTksLTAuMDY2IGwgLTI2LjI5Myw1MS45ODQgYyAtMTAuNTU5LC0xLjk0NSAtMjEuMTA5LC00LjUzMSAtMzEuNTk4LC03LjkzOCAtMTAuNDkyLC0zLjQxIC0yMC41NTEsLTcuNTE5IC0zMC4yMywtMTIuMTQ4IGwgOS4yNjksLTU3LjQzNCBjIC0xMC4wMzksLTUuOTI1IC0xOS41ODIsLTEyLjg1OSAtMjguNTExLC0yMC43MDcgbCAtNTEuNzQ2LDI2LjU1OSBjIC03LjQwNywtNy43NzcgLTE0LjQyMiwtMTYuMDcgLTIwLjkwMywtMjUgLTYuNDkyLC04LjkyMiAtMTIuMjExLC0xOC4xNiAtMTcuMzIsLTI3LjU5OCBsIDQxLjI1OCwtNDEuMDExIGMgLTQuNzE1LC0xMC45MjIgLTguMzYsLTIyLjEzNyAtMTAuODg3LC0zMy41MTIgbCAtNTcuNDgxLC04LjkzIGMgLTEuNDIxLC0xMC42NCAtMi4yMTgsLTIxLjQ4IC0yLjIxOCwtMzIuNTA4IDAsLTExLjAzMSAwLjc5NywtMjEuODU1IDIuMjE4LC0zMi41MTEgbCA1Ny41NjMsLTguOTM0IGMgMi41NTksLTExLjQ0NSA2LjE2OCwtMjIuNjY4IDEwLjgyLC0zMy40OTYgTCAyNDAuMDksMzA3LjU3IGMgNS4xMDksLTkuNDQ1IDEwLjgyOCwtMTguNjgzIDE3LjMyLC0yNy41OTcgNi40ODEsLTguOTI2IDEzLjQ4OCwtMTcuMjI3IDIwLjkwMywtMjUgbCA1MS42NzUsMjYuNTIzIGMgNC40MSwtMy44NjcgOSwtNy41OSAxMy44NCwtMTEuMTA1IDQuODAxLC0zLjQ4NSA5LjcyMywtNi42ODggMTQuNzIzLC05LjY1NyBsIC05LjI1OCwtNTcuMzM2IGMgOS42ODcsLTQuNjM2IDE5Ljc0NiwtOC43NSAzMC4yMzgsLTEyLjE1NiAxMC40ODksLTMuNDE4IDIxLjAzOSwtNS45OTYgMzEuNTk4LC03LjkyOSBsIDI2LjIxOSw1MS44NDMgYyAxMS43NzMsLTEuMDkzIDIzLjU3LC0xLjA2MiAzNS4yODUsMC4wMzkgbCAyNi4yMzgsLTUxLjg5NCBjIDEwLjU1OSwxLjk0NSAyMS4xMTcsNC41MjMgMzEuNTk4LDcuOTQxIDEwLjUwNCwzLjQwNiAyMC41NTEsNy41MiAzMC4yMzgsMTIuMTQ5IGwgLTkuMjQ2LDU3LjI4NSBjIDEwLjA3OCw1Ljk1NyAxOS42NDgsMTIuODk4IDI4LjYxNywyMC43ODkgbCA1MS42MjEsLTI2LjQ5MiBjIDcuNDAzLDcuNzczIDE0LjQxLDE2LjA3NCAyMC44OTksMjUgNi40ODQsOC45MTQgMTIuMjAzLDE4LjE1MiAxNy4zMTIsMjcuNTk3IGwgLTQxLjE0OCw0MC45MDcgYyA0LjczLDEwLjk1NyA4LjM3OSwyMi4yMDcgMTAuOTI5LDMzLjY0NCBsIDU3LjM0LDguODk1IiAvPjwvZz48L2c+PC9nPjwvc3ZnPg==" />
</div>
<div class="loader">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDguOCA0OC4xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OC44IDQ4LjE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRTg0NjJCO308L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNC42LDIwLjJsLTEyLjgsMS4zbDMuOCw1LjNsLTYsNC40YzAsMC45LDEuOSwzLjcsMy4yLDQuNWw2LjEtNC40bDQuMSw1LjZsNS4xLTExLjhsMy44LDUuMmw0LjUtMy4ybC00LTUuNmw1LjItMy44Yy0wLjgtMS43LTEuOS0zLjItMy4yLTQuNUwyOS4yLDE3bC00LTUuNmwtNC41LDMuMmw0LjEsNS42bDAsMCIvPjwvc3ZnPg=="/>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDguOCA0OC4xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OC44IDQ4LjE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRTg0NjJCO308L3N0eWxlPjx0aXRsZT5aZWljaGVuZmzDpGNoZSA0PC90aXRsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDguNiwyNy4zYzAuMy0yLjIsMC4zLTQuMywwLTYuNWwtNS43LTAuOWMtMC4zLTEuMi0wLjYtMi4zLTEuMS0zLjRsNC4xLTQuMWMtMC41LTEtMS4xLTEuOS0xLjctMi44Yy0wLjYtMC45LTEuMy0xLjctMi4xLTIuNWwtNS4yLDIuN2MtMC40LTAuNC0wLjktMC44LTEuNC0xLjFjLTAuNS0wLjQtMS0wLjctMS41LTFMMzUsMmMtMS0wLjUtMi0wLjktMy0xLjJjLTEtMC4zLTIuMS0wLjYtMy4yLTAuOGwtMi42LDUuMmMtMS4yLTAuMS0yLjMtMC4xLTMuNSwwTDIwLjEsMGMtMS4xLDAuMi0yLjEsMC41LTMuMiwwLjhjLTEsMC4zLTIsMC44LTMsMS4ybDAuOSw1LjdjLTEsMC42LTIsMS4zLTIuOSwyLjFMNi43LDcuMkM2LDgsNS4zLDguOCw0LjcsOS43Yy0wLjYsMC45LTEuMiwxLjgtMS43LDIuOGw0LjEsNC4xYy0wLjUsMS4xLTAuOCwyLjItMS4xLDMuM2wtNS44LDAuOWMtMC4zLDIuMi0wLjMsNC4zLDAsNi41TDYsMjguMmMwLjMsMS4xLDAuNiwyLjMsMS4xLDMuM2wtNC4xLDQuMWMwLjUsMSwxLjEsMS45LDEuNywyLjhDNS4zLDM5LjMsNiw0MC4yLDYuOCw0MWw1LjItMi43YzAuNCwwLjQsMC45LDAuOCwxLjQsMS4xYzAuNSwwLjQsMSwwLjcsMS41LDFsLTAuOSw1LjdjMSwwLjUsMiwwLjksMywxLjJjMSwwLjMsMi4xLDAuNiwzLjIsMC44bDIuNi01LjJjMS4yLDAuMSwyLjMsMC4xLDMuNSwwbDIuNiw1LjJjMS4xLTAuMiwyLjEtMC41LDMuMi0wLjhjMS0wLjMsMi0wLjcsMy0xLjJMMzQsNDAuNGMxLTAuNiwyLTEuMywyLjktMi4xbDUuMiwyLjdjMC44LTAuOCwxLjUtMS42LDIuMS0yLjVjMC42LTAuOSwxLjItMS44LDEuNy0yLjhsLTQuMS00LjFjMC41LTEuMSwwLjgtMi4yLDEuMS0zLjRMNDguNiwyNy4zeiBNMzUuNSwzMi4xYy0wLjEsMC4yLTAuMywwLjQtMC40LDAuNXMtMC4xLDAuMS0wLjEsMC4yYy0wLjIsMC4zLTAuNSwwLjYtMC44LDAuOGwtMC4xLDAuMWMtMC4zLDAuMy0wLjUsMC41LTAuOCwwLjhsLTAuMiwwLjFjLTAuMywwLjItMC42LDAuNC0wLjksMC42TDMyLDM1LjVMMzEuMSwzNmwtMC40LDAuMmMtMC4yLDAuMS0wLjUsMC4yLTAuOCwwLjNsLTAuNSwwLjJMMjguOCwzN2wtMC43LDAuMmwtMC42LDAuMmMtMC4yLDAuMS0wLjUsMC4xLTAuNywwLjJsLTAuNiwwLjFsLTAuNywwLjFoLTAuN2gtMC40aC0wLjJoLTAuOGwtMC42LDBsLTAuNy0wLjFjLTAuMiwwLTAuNC0wLjEtMC42LTAuMXMtMC40LTAuMS0wLjYtMC4ybC0wLjctMC4yYy0wLjItMC4xLTAuNC0wLjEtMC42LTAuMnMtMC41LTAuMi0wLjctMC4zbC0wLjUtMC4yTDE3LjcsMzZjLTAuMi0wLjEtMC4zLTAuMi0wLjUtMC4zcy0wLjUtMC4zLTAuNy0wLjVsLTAuMi0wLjFjLTAuMS0wLjEtMC4yLTAuMS0wLjItMC4yYy0wLjItMC4yLTAuNS0wLjQtMC43LTAuNmwtMC4yLTAuMWwwLDBjLTIuNy0yLjUtNC40LTUuOS00LjUtOS42di0wLjFjMC0wLjIsMC0wLjMsMC0wLjVjMC0wLjYsMC4xLTEuMywwLjEtMS45bDAuMS0wLjRjMC0wLjIsMC4xLTAuNSwwLjEtMC43czAuMS0wLjQsMC4xLTAuNnMwLjItMC42LDAuMy0wLjlzMC4xLTAuMywwLjItMC41czAuMS0wLjQsMC4yLTAuNXMwLjItMC41LDAuNC0wLjhzMC4yLTAuNCwwLjMtMC42czAuMi0wLjQsMC4zLTAuNmwwLjMtMC40bDAuMS0wLjJsMC4yLTAuMmMwLjItMC4yLDAuMy0wLjUsMC41LTAuN2wwLjQtMC40YzAuMi0wLjIsMC4zLTAuNCwwLjUtMC41czAuMy0wLjMsMC41LTAuNHMwLjQtMC4zLDAuNi0wLjVsMC41LTAuNGwwLjYtMC40bDAuNS0wLjNsMC43LTAuNGwwLjQtMC4ybDAuOC0wLjNsMC40LTAuMWMwLjMtMC4xLDAuNi0wLjIsMC45LTAuM2wwLjQtMC4xYzAuMy0wLjEsMC42LTAuMSwwLjgtMC4yYzAuMiwwLDAuMy0wLjEsMC41LTAuMWwwLjgtMC4xSDI0aDAuNGgwLjJjMC4zLDAsMC41LDAsMC44LDBIMjZsMC45LDAuMWwwLjUsMC4xYzAuMywwLjEsMC42LDAuMSwwLjksMC4ybDAuNCwwLjFjMC4zLDAuMSwwLjYsMC4yLDAuOSwwLjNsMC4zLDAuMWMwLjMsMC4xLDAuNiwwLjMsMC45LDAuNGwwLjMsMC4xYzAuMywwLjIsMC42LDAuMywwLjgsMC41YzAuMSwwLjEsMC4yLDAuMSwwLjMsMC4ybDAuMywwLjJsMC40LDAuM2MwLjIsMC4xLDAuMywwLjMsMC41LDAuNGMwLjEsMC4xLDAuMiwwLjIsMC4zLDAuM2wwLDBjMS40LDEuMywyLjQsMi44LDMuMiw0LjVsMCwwYzAsMCwwLDAuMSwwLDAuMWMwLjEsMC4yLDAuMSwwLjMsMC4yLDAuNXMwLjIsMC40LDAuMiwwLjZzMC4xLDAuMywwLjIsMC41czAuMiwwLjYsMC4yLDAuOXMwLjEsMC4zLDAuMSwwLjVzMC4xLDAuNiwwLjEsMC44YzAsMC4xLDAsMC4yLDAsMC4zYzAsMC40LDAuMSwwLjgsMC4xLDEuMmMwLDAsMCwwLjEsMCwwLjFzMCwwLjEsMCwwLjFDMzguMSwyNywzNy4yLDI5LjgsMzUuNSwzMi4xeiIvPjwvc3ZnPg=="
style="animation-name: spin;animation-duration: 2500ms;animation-iteration-count: infinite;animation-timing-function: ease;"/>
</div>
</body>
</html>
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