<!DOCTYPE html>
<html lang="">
<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>
<style>
* {
margin: 0;
padding: 0;
}
.loadingSpinn {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.atom-spinner,
.atom-spinner * {
box-sizing: border-box;
}
.atom-spinner {
height:100px;
width: 100px;
overflow: hidden;
}
.atom-spinner .spinner-inner {
position: relative;
display: block;
height: 100%;
width: 100%;
}
.atom-spinner .spinner-circle {
display: block;
position: absolute;
color: #409eff;
font-size: calc(60px * 0.24);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.atom-spinner .spinner-line {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation-duration: 1s;
border-left-width: calc(60px / 25);
border-top-width: calc(60px / 25);
border-left-color: #409eff;
border-left-style: solid;
border-top-style: solid;
border-top-color: transparent;
}
.atom-spinner .spinner-line:nth-child(1) {
animation: atom-spinner-animation-1 1s linear infinite;
transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
}
.atom-spinner .spinner-line:nth-child(2) {
animation: atom-spinner-animation-2 1s linear infinite;
transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
}
.atom-spinner .spinner-line:nth-child(3) {
animation: atom-spinner-animation-3 1s linear infinite;
transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
}
@keyframes atom-spinner-animation-1 {
100% {
transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
}
}
@keyframes atom-spinner-animation-2 {
100% {
transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
}
}
@keyframes atom-spinner-animation-3 {
100% {
transform: rotateZ(360deg) rotateX(66deg) rotateZ(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 class="loadingSpinn">
<div class="atom-spinner">
<div class="spinner-inner">
<div class="spinner-line"></div>
<div class="spinner-line"></div>
<div class="spinner-line"></div>
<!--Chrome renders little circles malformed :(-->
<div class="spinner-circle">
●
</div>
</div>
</div>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>