Skip to content

Instantly share code, notes, and snippets.

@jcayzac

jcayzac/Aurora (bug).png

Created January 21, 2012 06:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jcayzac/1651637 to your computer and use it in GitHub Desktop.
Save jcayzac/1651637 to your computer and use it in GitHub Desktop.
Download ZIP
Aurora bug
Raw
bug.html
<!DOCTYPE html>
<html>
<head>
<meta content='application/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=1280' name='viewport'/>
<title>Test</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
html,body,section,div { margin:0; padding:0;border:0;outline:0;}
section { clear:both; width:70%; margin:0 auto; text-align:left; }
body { background:#f0f0f0; color:#222;font-family:sans-serif;font-size:14px; text-align:center; margin:50px auto;}
</style>
</head>
<body>
<style>
#spinner .spinner {
clear:both;
border-radius:50px;
width:60px;
height:60px;
margin:0 auto;
box-shadow:inset 0px 0px 10px 20px rgba(0,0,0,0.25);
}
#spinner .spinner div {
margin:0 auto;
position:relative;
opacity:.9;
border:5px solid rgba(0,0,0,0.75);
border-top-color:transparent;
border-left-color:transparent;
border-radius:50px;
}
#spinner .spinner div:first-child {
width:50px;
height:50px;
box-shadow: 0 0 35px rgba(0,0,0,0.75);
-moz-animation:spinner-spin 2s infinite linear;
-webkit-animation:spinner-spin 2s infinite linear;
}
#spinner .spinner div:last-child {
width:30px;
height:30px;
top:-50px;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
-moz-animation:spinner-spinoff 2s infinite linear;
-webkit-animation:spinner-spinoff 2s infinite linear;
}
@-moz-keyframes spinner-spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinner-spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spinner-spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinner-spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
</style>
<section id="spinner">
<h1>Spinner</h1>
<div class="spinner"><div></div><div></div></div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment