loading-svg
Version:
Animated SVG loading indicators
150 lines (137 loc) • 5.08 kB
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>