<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
<!-- <style>
|
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999;
|
background: #F3BA02;
|
}
|
#loader {
|
display: block; position: relative; left: 50%; top: 40%; z-index: 1001; width: 290px; height: 290px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid transparent;border-top-color: #A063F3;
|
-webkit-animation: spin 2s linear infinite;
|
-ms-animation: spin 2s linear infinite;
|
-moz-animation: spin 2s linear infinite;
|
-o-animation: spin 2s linear infinite;
|
animation: spin 2s linear infinite;
|
}
|
#loader:before {
|
content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A063F3;
|
-webkit-animation: spin 3s linear infinite;
|
-moz-animation: spin 3s linear infinite;
|
-o-animation: spin 3s linear infinite;
|
-ms-animation: spin 3s linear infinite;
|
animation: spin 3s linear infinite;
|
}
|
#loader:after {
|
content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;
|
-moz-animation: spin 1.5s linear infinite;
|
-o-animation: spin 1.5s linear infinite;
|
-ms-animation: spin 1.5s linear infinite;
|
-webkit-animation: spin 1.5s linear infinite;
|
animation: spin 1.5s linear infinite;
|
}
|
@-webkit-keyframes spin {
|
0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
}
|
@keyframes spin {
|
0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
}
|
</style> -->
|
<style>
|
/* html,
|
body {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
body {
|
background: rgba(0,0,0,0.9);
|
} */
|
*{
|
margin: 0;
|
padding: 0;
|
}
|
.body{
|
width: 100vw;
|
height: 100vh;
|
overflow: hidden;
|
background: rgba(0,0,0,0.9);
|
}
|
.loader,
|
.loader span,
|
.spinner {
|
position: absolute;
|
width: 200px;
|
height: 200px;
|
top: 50%;
|
left: 50%;
|
margin: -100px 0 0 -100px;
|
}
|
.loader span {
|
line-height: 200px;
|
padding-left: 60px;
|
font-size: 20px;
|
font-family: 'Roboto', sans-serif;
|
letter-spacing: 1px;
|
color: rgba(255,255,255,0);
|
text-shadow: 0 0 0 rgba(255,255,255,0.75), 0 0 2px #1e90ff, 0 0 4px #1e90ff, 0 0 6px #1e90ff, 0 0 8px #1e90ff, 0 0 10px #1e90ff;
|
}
|
.spinner {
|
border-radius: 50%;
|
box-shadow: 3px 0 1px -1px #fff, 5px 0 5px rgba(30,144,255,0.5), inset -10px 0 10px -5px rgba(30,144,255,0.5);
|
-webkit-animation: loading 1s linear infinite;
|
animation: loading 1s linear infinite;
|
}
|
.spinner:before {
|
position: absolute;
|
width: 160px;
|
height: 160px;
|
margin: 10% 0 0 10%;
|
border-radius: 50%;
|
content: " ";
|
box-shadow: 2px 0 1px -1px #fff, 10px 0 5px -5px rgba(30,144,255,0.5), inset -3px 0 3px rgba(30,144,255,0.5);
|
}
|
@-webkit-keyframes loading {
|
from {
|
-webkit-transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
to {
|
-webkit-transform: rotate(360deg);
|
transform: rotate(360deg);
|
}
|
}
|
@keyframes loading {
|
from {
|
-webkit-transform: rotate(0deg);
|
transform: rotate(0deg);
|
}
|
to {
|
-webkit-transform: rotate(360deg);
|
transform: rotate(360deg);
|
}
|
}
|
</style>
|
</head>
|
|
<body>
|
<noscript>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
</noscript>
|
|
<div id="app">
|
<!-- <div id="loader-wrapper">
|
<div id="loader">
|
</div>
|
</div> -->
|
<!-- <div class="body">
|
<div class="loader"><span id="counter">
|
Loading</span>
|
<div class="spinner"></div>
|
</div>
|
</div> -->
|
|
<!-- <div class="body">
|
<div class="ring">Loading
|
<span></span>
|
</div>
|
</div> -->
|
|
</div>
|
</div>
|
|
|
<!-- built files will be auto injected -->
|
</body>
|
</html>
|
