<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="theme-color" content="#222222">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap&subset=cyrillic"
rel="stylesheet" />
<title>Убежище</title>
<style>
#main_loader {
position: fixed;
width: 100%;
height: 100%;
background: #222222;
top: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font: 600 22px 'Montserrat';
color: white;
}
#main_loader>div {
margin: 3px 0;
}
@keyframes erdball {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
#preload_shade {
width: 120px;
height: 120px;
box-shadow: white 0 0 0 3px;
border-radius: 100%;
overflow: hidden;
position: relative;
margin-bottom: 15px !important;
}
#preload_shade>span {
width: 100%;
height: 100%;
box-shadow: white 0 0 0 2px;
border-radius: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
animation: erdball 3s infinite;
will-change: transform;
}
#preload_shade>span:nth-child(2) {
animation-delay: -1s;
}
#preload_shade>span:nth-child(3) {
animation-delay: -2s;
}
</style>
</head>
<body>
<div id="main_loader">
<div id="preload_shade">
<span></span>
<span></span>
<span></span>
</div>
<div>СМИРЕННО</div>
<div>ОЖИДАЙТЕ</div>
</div>
<div id="app"></div>
</body>
</html>