forked from samhingu/Moleculist
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (99 loc) · 3.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<title>Moleculist App</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="apple-touch-icon" sizes="196x196" type="image/png" href="img/mobile-app-icon.png">
<link rel="shortcut icon" sizes="196x196" 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);
}
body.loading #content {
position: relative;
width: 100%;
height: 100%;
font-size: 0px;
}
body.loading #logo {
position: absolute;
display: block;
width: 140px;
height: 140px;
top: calc(50vh - 70px);
left: calc(50vw - 70px);
}
div.t {
display: inline-block;
box-sizing: border-box;
margin: 0px;
width: 10vw;
height: 10vh;
background-color: #e2e2e2;
}
div.t.on {
-webkit-animation: pulse 3s infinite linear alternate;
-moz-animation: pulse 3s infinite linear alternate;
animation: pulse 3s infinite linear alternate;
}
div.t.on:hover {
-webkit-animation: none;
background-color: #ccc;
}
@-webkit-keyframes pulse {
100% {
background-color: #fff;
}
}
@-moz-keyframes pulse {
100% {
background-color: #fff;
}
}
@keyframes pulse {
100% {
background-color: #fff;
}
}
</style>
</head>
<body class="loading">
<div id="content" tabindex='-1'>
<svg id="logo" viewBox="0 0 140 140" version="1.1">
<path d="M119.49603,20.5014878 L100.989057,39.0094878 C105.89805,43.9184878 109.859044,49.7734878 111.669042,55.3734878 C122.692025,89.4684878 93.3250687,120.604488 59.5321185,112.820488 C44.9911399,109.470488 30.5211612,94.9984878 27.1751661,80.4564878 C20.432176,51.1514878 42.9571429,25.1854878 71.2931012,25.9974878 L93.3090687,3.98048778 C86.0960794,1.43348778 78.3420908,0.0304877767 70.2641027,0.000487776719 C32.014159,-0.141512223 0.549205302,30.7384878 0.00720609982,68.9844878 C-0.547793083,108.124488 31.0271604,140.024488 70.045103,139.999488 C108.802046,139.975488 140,108.756488 140,70.0004878 C140,50.6694878 132.164012,33.1694878 119.49603,20.5014878 L119.49603,20.5014878 Z"
fill="#8C50FF"></path>
<path d="M27.1736636,80.457549 C30.5194807,94.999549 44.98869,109.472549 59.5288954,112.821549 C93.3190487,120.605549 122.685444,89.469549 111.663046,55.374549 C109.852145,49.774549 105.891362,43.918549 100.98363,39.010549 L69.9953234,70.000549 L100.083679,70.001549 C100.083679,86.762549 86.3804279,100.322549 69.5663468,100.089549 C53.4302287,99.865549 40.23095,86.746549 39.9119674,70.611549 C39.7429767,62.061549 43.140791,54.304549 48.7174862,48.725549 L48.6404904,48.648549 L71.2872528,25.998549 C42.9548011,25.186549 20.4310321,51.152549 27.1736636,80.457549 L27.1736636,80.457549 Z"
fill="#333333"></path>
</svg>
<script>
var c = document.getElementById("content");
for (var i = 0; i < 100; i += 1) {
c.insertAdjacentHTML('beforeend', '<div class="t off"></div>');
}
var timer = setInterval(function () {
var again = false;
if (document.body.classList.contains('loading')) {
var ts = c.querySelectorAll('div.t.off');
var index = Math.floor(Math.random() * ts.length);
ts[index].classList.remove('off');
ts[index].classList.add('on');
if (ts.length > 1) {
again = true;
}
}
if (! again) {
clearInterval(timer);
}
}, 100)
</script>
</div>
<script src="/static/bundle.js"></script>
</body>
</html>