<!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>