src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Ferret</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" href="/img/shortcut-icon.png" />
<link rel="apple-touch-icon" sizes="152x152" type="image/png" href="/img/mobile-app-icon.png">
<style>
body.loading {margin: 0px; width: 100vw; height: 100vh;
background-image: radial-gradient(circle at 50% 15%, #fff, #fff 30%, #ccc);
/*animation: draw 3s infinite linear alternate;*/
}
body.loading #content {
position: relative;
width: 100%;
height: 100%;
font-size: 0px;
}
body.loading #logo {
position: absolute; display: block; width: 120px; height: 120px;
top: calc(50vh - 60px); left: calc(50vw - 60px);
}
body.loading #logo path {
stroke-dasharray: 240px 480px;
stroke-dashoffset: 0;
animation: draw 3s infinite linear alternate;
}
@keyframes draw {
0%, 5% { stroke-dashoffset: 240px; }
90%, 100% { stroke-dashoffset: 0; }
}
</style>
</head>
<body class="loading">
<div id="content">
<svg id="logo" width="120px" height="120px" viewBox="0 0 120 120" version="1.1">
<title>Ingot logo</title>
<g fill='none' stroke='#01A982'>
<rect stroke="none" x="0" y="0" width="120" height="120"></rect>
<g stroke-width="4">
<path d="M54,96 L54,106 L14,106 L14,66 L24,66"></path>
<path d="M24,36 L84,36 L84,96 L24,96 L24,36"></path>
<path d="M34,36 L34,18 L102,18 L102,86 L84,86"></path>
<rect x="34" y="66" width="20" height="20"></rect>
</g>
</g>
</svg>
</div>
<script src="/index.js"></script>
</body>
</html>