-
Notifications
You must be signed in to change notification settings - Fork 265
/
index.html
149 lines (137 loc) · 4.96 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading...</title>
<meta name="author" content="Jxnblk">
<meta name="description" content="This could take a while">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="site/style.css" />
<style>
.y100 { min-height: 100vh }
</style>
</head>
<body class="white bg-red">
<div class="table y100 center bg-red">
<div class="table-cell py4">
<img src="loading-bubbles.svg" width="64" height="64" />
<h1 class="h1 mt2 mb0">Loading...</h1>
<p class="small mb2">This could take a while</p>
<div class="table mb3">
<div class="table-cell half-width"></div>
<div class="table-cell">
<iframe src="https://ghbtns.com/github-btn.html?user=jxnblk&repo=loading&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
<div class="table-cell">
<a href="https://twitter.com/share"
class="twitter-share-button"
data-text="Loading... this could take a while"
data-via="jxnblk"
data-size="large">
Tweet
</a>
</div>
<div class="table-cell half-width"></div>
</div>
<div id="ad-container" style="bottom:0;right:0;"
class="center sm-fixed p1">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=jxnblkcom" id="_carbonads_js"></script>
<style>
#carbonads {
display: inline-block;
font-size: 14px;
line-height: 1.25;
text-align: left;
max-width: 320px;
}
#carbonads a,
#carbonads a:hover {
text-decoration: none;
color: inherit;
}
#carbonads span { display: block }
#carbonads > span::before,
#carbonads > span::after {
content: '';
display: table;
}
#carbonads > span::after {
clear: both;
}
.carbon-img {
float: left;
margin-right: .5em;
}
.carbon-img > img { display: block }
.carbon-text { overflow: hidden }
.carbon-poweredby {
float: left;
margin-top: .25em;
opacity: 0.5;
}
@media (min-width: 40em) {
.sm-fixed { position: fixed }
}
</style>
</div>
</div>
</div>
<div class="table y100 center bg-purple">
<div class="table-cell py4">
<img src="loading-spinning-bubbles.svg" width="64" height="64" />
<h1 class="h1 mt2 mb0">still loading...</h1>
</div>
</div>
<div class="table y100 center bg-blue">
<div class="table-cell py4">
<img src="loading-spokes.svg" width="64" height="64" />
<h1 class="h1 mt2 mb0">seriously?</h1>
</div>
</div>
<div class="table y100 center bg-green">
<div class="table-cell py4">
<img src="loading-bars.svg" width="64" height="64" />
<h1 class="h1 mt2 mb0">wtf</h1>
</div>
</div>
<div class="table y100 center bg-dark">
<div class="table-cell py4">
<img src="loading-cylon-red.svg" width="256" height="32" />
<h1 class="h1 mt2 mb0">frak me</h1>
</div>
</div>
<div class="table y100 center bg-mid-gray">
<div class="table-cell py4">
<img src="loading-spin.svg" width="64" height="64" />
<h1 class="h1 mt2">i give up</h1>
<div class="table">
<div class="table-cell half-width"></div>
<div class="table-cell">
<iframe src="https://ghbtns.com/github-btn.html?user=jxnblk&repo=loading&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
<div class="table-cell">
<a href="https://twitter.com/share"
class="twitter-share-button"
data-text="Loading... this could take a while"
data-via="jxnblk"
data-size="large">
Tweet
</a>
</div>
<div class="table-cell half-width"></div>
</div>
<a href="https://github.com/jxnblk/loading" class="bold mt2 block">GitHub</a>
<a href="http://jxnblk.com" class="bold mt2 block">Made by Jxnblk</a>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4603832-6', 'auto');
ga('send', 'pageview');
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>